React에서 하위 구성 요소에 소품을 어떻게 전달할 수 있나요?

{this.props.children}에 Prop 전달

하위 요소를 허용하는 일반 구성 요소를 정의할 때 모든 하위 구성 요소에 특정 속성을 전달해야 합니다. . React 구성 요소 패러다임에서는 {this.props.children}을 사용하여 이를 달성합니다. 그러나 질문이 생깁니다: 이러한 속성을 어떻게 전달합니까?

새 소품으로 하위 항목 복제

React.Children은 하위 요소를 반복하고 복제하는 유틸리티를 제공하여 수정된 하위 요소를 생성할 수 있습니다. 새로운 소품이 있는 버전:

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

function Parent({ children }) {
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

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

참고: 일반적으로 사용하지 않는 것이 좋습니다. 잠재적인 취약성과 잠재적인 유형 안전성 문제로 인해 cloneElement 접근 방식을 사용합니다.

위 내용은 React에서 하위 구성 요소에 소품을 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!