인터뷰 질문 - React (8): React는 슬롯을 어떻게 구현하나요?

1. React 슬롯의 개념

소켓은 구성 요소를 보다 유연하고 재사용 가능하게 만드는 기술입니다. 이를 통해 구성 요소 내부의 일부 위치를 예약한 다음 구성 요소를 사용하여 외부 콘텐츠의 중첩을 실현할 때 이러한 위치를 채울 수 있습니다.

2. React 슬롯 구현 방법

propsReact에서 슬롯은 전달과 소품 이라는 두 가지 방법으로 구현할 수 있습니다 children.

1. 소품 통과:

이는 슬롯을 구현하는 가장 간단한 방법이며 상위 구성 요소는 props를 통해 하위 구성 요소에 콘텐츠를 전달합니다.

예:

import React from 'react';

function Card(props) {
  return (
    <div className="card">
      {props.header}
    </div>
  );
}

function App() {
  return (
    <Card header={<h2>Title</h2>} />
  );
}

2. children속성을 사용하십시오:

childrenReact 구성 요소에는 구성 요소의 중첩된 콘텐츠에 액세스하는 데 사용할 수 있는 특별한 속성이 있습니다 .

예:

import React from 'react';

function Card(props) {
  return (
    <div className="card">
      <div className="content">
        {props.children}
      </div>
    </div>
  );
}

function App() {
  return (
    <Card>
      <p>Card content here.</p>
    </Card>
  );
}

참고: 여러 요소가 전달되면 하위 항목은 배열 유형입니다.

import React from 'react';

function Card(props) {
  return (
    <div className="card">
      <div className="content">
        {props.children[0]}
        {props.children[1]}
      </div>
      //或者可以直接写props.children
      <div className="content">
        {props.children}
      </div>
    </div>
  );
}

function App() {
  return (
    <Card>
      <p>Card content here.</p>
      <span>Else content</span>
    </Card>
  );
}

3. 범위 슬롯

React는 범위가 지정된 슬롯을 구현하거나 props를 사용하여 값을 전달하지만 매개변수를 수신하려면 콜백 함수만 전달하면 됩니다.

예:

import React from 'react';

function Card(props) {
  return (
    <div className="card">
      {props.setHeader("CardHeader")}
    </div>
  );
}

function App() {
  return (
    <Card setHeader={text => <p>{text}</p>} />
  );
}