React의 기능적 구성 요소 복제

Question

내가 만들고 있는 구성 요소의 하위 요소를 수정하고 복제하려고 하는데 최근 children 类型根据我传递 children이 변경된 방식이 변경된 것을 발견했습니다. >.

예를 들어 JSX를 어린 시절에 전달했다면:

으아악

구조를 MyComponent 中的 children 조사해 보면 객체가 다음과 같은 모습을 볼 수 있습니다.

으아악

Since props.children 存在，所以 React.cloneElement직접 사용하실 수 있습니다.

다음과 같은 기능적 구성 요소를 만들 경우:

으아악

다음과 같이 사용해 보세요.

으아악

그러면 children 객체의 구조는 다음과 같습니다:

으아악

더 이상 사용할 수 없지만 React.cloneElement，除非我调用children.type() 이에 대한 문서를 많이 찾을 수 없습니다.

왜 이런 일이 발생하나요? 이것이 예상되는가? 하위 요소의 전체 트리를 복제하는 유일한 방법은 children.type() 호출입니까?

Answer 1

Hello

是一个 div，은 div를 반환하는 함수이므로 분명히 동일한 것은 아닙니다. 有一个空对象作为 props，因为它没有子对象，而且我们没有向它传递一个带有值的属性，因此 props是 {}.

정말로 액세스하고 복제하려는 것은 props에 관계없이 반환된 상위 JSX 요소의 하위 항목입니다.
반환된 상위 JSX 요소는 실제로 하위 요소(Hello)가 포함된 children.type()(함수가 반환하는 것)이므로 복제할 수 있도록 children.type().props.children도 여기에 있습니다.