React で機能コンポーネントのクローンを作成する

Question

作成中のコンポーネントの子要素を変更して複製しようとしていますが、children> の渡し方によって children 型が変わることに最近気付きました。

たとえば、JSX を子として渡す場合:

リーリー

MyComponent の children 構造を検査すると、次のようなオブジェクトが表示されます。 リーリー

props.children が存在するため、React.cloneElement はそれを直接使用できます。

次のような機能コンポーネントを作成すると:

リーリー

そして次のように使用してみてください:

リーリー

そうすると、

children オブジェクトの構造は次のようになります: リーリー

children.type()

を呼び出さない限り、React.cloneElement は使用できなくなりましたが、これに関するドキュメントはあまり見つかりません。 なぜこのようなことが起こるのでしょうか?これは期待されていますか?子のツリー全体のクローンを作成するには、

children.type()

を呼び出すことが唯一の方法ですか?

Answer 1

Hello

は div であり、 は div を返す関数なので、明らかに同じものではありません。 props として空のオブジェクトがあります。子オブジェクトがなく、値を持つプロパティを渡していないため、props は # です。 ##{}。

実際にアクセスしてクローンを作成したいのは、プロパティに関係なく、返される親 JSX 要素の子要素 ​​

です。 返される親 JSX 要素は、実際には
children.type() (関数が返すもの) であり、その中に子がラップされています (Hello) ので、children.type().props.children もここに存在するため、クローンを作成できます。