いつReact.cloneElementとthis.props.childrenを使用する必要がありますか？

Question

私は依然としてReactとインターネット上の多くの例でまだまだ午前中ですが、私は混乱している子要素のレンダリングにこのようなバリエーションを見ています。通常、私はこれを参照してください。

class Users extends React.Component { 
    render() { 
    return (
     <div> 
     <h2>Users</h2> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

をしかし、私はこのような例を参照してください。

<ReactCSSTransitionGroup 
    component="div" 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={500} 
    > 
    {React.cloneElement(this.props.children, { 
     key: this.props.location.pathname 
     })} 
</ReactCSSTransitionGroup> 

今私は、APIを理解するが、私はそれを使用する必要があるときdocsが正確に明らかにしません。

他の人はできないことは何ですか？誰かが私にこのより良い事例を説明できますか？

Answer 1

まず、React.cloneElementの例は、あなたの子供が単一のReact要素である場合にのみ機能します。

ほとんどすべての場合{this.props.children}はあなたが望むものです。 クローニングは、親が要素を送信し、子コンポーネントがその要素のいくつかの小道具を変更する必要がある、または実際のDOM要素にアクセスするためにrefのようなものを追加する必要がある、より高度なシナリオでは便利です。

上記の例では、子を与える親はコンポーネントのキー要件を知らないため、与えられた要素のコピーを作成し、そのオブジェクトの一意の識別子に基づいてキーを追加します。 https://facebook.github.io/react/docs/multiple-components.html

Answer 2

を動的に使用する必要があるときは、常には、レンダリング機能内で子要素の小道具を変更します。

return this.props.childrenは、親（消費者）から供給された反応ノードをレンダリングするだけです。しかし、時には我々は（プロデューサー）は、子要素（反対の消費者へのコントロールを生成する小道具をレンダリングするために）、例えばに多くのロジックをカプセル化react-router switch、またはアクティブリストの項目を更新するハンドラを添付したいのですが、

は、要素を反応します不変。

パフォーマンス上の問題のため

ので、我々はほぼ同等cloneElements使用する必要があります。

<element.type {...element.props} {...props}>{children}</element.type>