React에서 `this.props.children`에 소품을 효과적으로 전달하는 방법은 무엇입니까?

{this.props.children}에 props를 전달하는 방법

이 질문의 목적은 래퍼 내의 모든 하위 항목에 props를 전달하는 적절한 방법을 명확히 하는 것입니다. 렌더링을 위해 {this.props.children}을 활용하는 구성 요소입니다.

새 항목으로 어린이 복제 소품

한 가지 접근 방식은 React.Children을 사용하는 것인데, 이는 각 하위 요소를 반복하고 React.cloneElement를 통해 새 소품으로 복제합니다. 그러나 이 방법은 취약한 코드로 이어질 수 있으므로 일반적으로 권장되지 않습니다.

설명을 위해 다음 코드를 고려하세요.

const Child = ({ childName, sayHello }) => (
  <button onClick={() => sayHello(childName)}>{childName}</button>
);

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, child => {
    // `React.isValidElement` ensures the child is a valid React element.
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
}

이 접근 방식을 사용하면 props를 자식에게 전달할 수 있지만, 다음 대안에 비해 형식 안전성이 낮고 읽기 혼란스러울 수 있습니다.

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  // Directly passing props to children.
  return <div>{children(sayHello)}</div>;
}

이 후자의 접근 방식은 소품을 전달하려는 의도를 더 명시적으로 전달합니다. 어린이를 보호하고 유형 안전성을 유지합니다.

위 내용은 React에서 `this.props.children`에 소품을 효과적으로 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!