[解決済み] React.cloneElementとthis.props.childrenはいつ使い分ければいいのでしょうか？

質問

私はまだ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は理解できたが ドキュメント は、どのような場合に使用すべきなのかが明確ではありません。

では、一方にできて他方にできないことは何でしょうか？どなたか、もっと良い例で説明していただけませんか？

解決方法は？

props.children は実際の子どもたちではありません。 記述子 の子です。つまり、実際には何も変更することはできません。プロップを変更したり、機能を編集したりすることはできません。 読み取る . もし、何らかの変更を加える必要がある場合は 新要素 を使って React.CloneElement .

https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components

一例です。

などのコンポーネントのメインレンダリング機能 App.js :

render() {   
    return(
            <Paragraph>
              <Sentence>First</Sentence>
              <Sentence>Second</Sentence>
              <Sentence>Third</Sentence>
            </Paragraph>   
    ) 
}

を追加する必要があるとします。 onClick の各子孫に Paragraph というように Paragraph.js ということができます。

render() {
        return (
          <div>
          {React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {
              onClick: this.props.onClick })   
         })}
         </div>
       ) 
}

であれば、単純にこうすればいいのです。

render() {   
  return(
        <Paragraph onClick={this.onClick}>
          <Sentence>First</Sentence>
          <Sentence>Second</Sentence>
          <Sentence>Third</Sentence>
        </Paragraph>   
   ) 
}

注 その React.Children.map 関数は トップレベル つまり、子要素に直接プロップスを与えるということです (ここでは <Sentence /> 要素)を使用します。プロップをさらに下に渡す必要がある場合、たとえば <div></div> の1つの内部で <Sentence /> を使いたい要素は onClick プロパティを使用する場合、Context API を使用してそれを行うことができます。を作成します。 Paragraph プロバイダと Sentence 要素を消費者とします。