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

{this.props.children}

소개

React에서 래퍼 컴포넌트를 사용하려는 시나리오에 직면할 수 있습니다. 하위 구성 요소 그룹을 캡슐화하고 몇 가지 공통 속성을 전달합니다.

새 속성으로 하위 항목 복제

한 가지 접근 방식은 React.Children을 사용하여 반복하는 것입니다. 자식을 덮어쓰고 React.cloneElement를 사용하여 새 소품으로 각 요소를 복제합니다. 그러나 이 방법은 잠재적인 코드 취약성으로 인해 권장되지 않습니다.

<br>const Child = ({ childName, sayHello }) => (<br> <button onClick={() => sayHello(childName)}>{childName}</button><br>);</p>
<p>function Parent({ children }) {<br> 함수 sayHello(childName) {</p>
<pre class="brush:php;toolbar:false">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;

});

귀국

{childrenWithProps}

;
}

function App() {
// 유형 안전성은 낮지만 대안은 더 간단합니다
return (

<Parent>
  <Child childName="Billy" />
  <Child childName="Bob" />
</Parent>

);
}

ReactDOM.render(, document.getElementById("container"));

복제의 대안 하위

속성을 하위에 전달하려면 다음 대안을 고려하세요.

• 호이스팅 상태: 공유 속성을 상위 구성 요소의 상태로 이동합니다. props를 통해 전달합니다.
• Context API: 계층 관계에 관계없이 구성 요소 간에 데이터를 공유하는 컨텍스트 객체입니다.
• Render Props: 래퍼 구성 요소에 렌더링 Prop을 정의하고 이를 props를 취하는 함수로 하위 구성 요소에 전달합니다. 입력으로.

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