React.cloneElement の使い方の詳しい説明

React.cloneElement() で、
 要素、
 [小道具],
 [...子供たち]
）

定数MyTimeline = () => {
 戻る （
  <タイムライン>
   <タイムラインアイテム>2020-06-01</タイムラインアイテム>
   <タイムラインアイテム>2020-06-08</タイムラインアイテム>
   <タイムラインアイテム>2020-07-05</タイムラインアイテム>
  </タイムライン>
 ）
}

// タイムライン内のロジックは次のようになります。import class from 'classnames';
const タイムライン = props => {
 // ...
 // ...
 React のプロパティを count 要素に追加します。
 const items = React.children.map(props.children, (item, index) => {
  React.cloneElement(item, { を返す
   クラス名: クラス([
    アイテム.props.className、
    'タイムライン項目'、
    インデックス === カウント - 1 ? 'タイムライン項目最後' : ''
   ])
  })
 }
 <div className={'timeline'}>{ items }</div> を返します。
}

クラスSwitchはReact.Componentを拡張します。
 与える（） {
  戻る （
   <ルーターコンテキスト.コンシューマー>
    {コンテキスト => {
     invariant(context, "<Switch> を <Router> の外部で使用しないでください");

     const location = this.props.location || context.location;

     let 要素、一致;

     // React.Children.toArray().find() の代わりに React.Children.forEach を使用します
     // ここでtoArrayはすべての子要素にキーを追加するので、
     // 同じものをレンダリングする2つの <Route> のアンマウント/再マウントをトリガーします
     // 異なる URL にあるコンポーネント。
     React.Children.forEach(this.props.children, 子 => {
      マッチ == null && React.isValidElement(child) の場合 {
       要素 = 子;

       定数パス = child.props.path || child.props.from;

       一致 = パス
        ? matchPath(location.pathname, { ...child.props, path })
        : コンテキストに一致します。
      }
     });

     リターンマッチ
      React.cloneElement(要素、{場所、計算されたMatch:一致})
      : ヌル;
    }}
   </ルーターコンテキスト.コンシューマー>
  );
 }
}

const Tab = props => {
 const { onClick } = プロパティ;
 const tabPanes = React.children.map(props.children, (tabPane, index) => {
  const ペインクリック = () => {
   onClick && onClick(インデックス);
   tabPane.props?.onClick();
  }
  React.cloneElement(tabPane, { を返します。
    onClick: ペインクリック、
  })
 })
 <div>{ tabPanes }</div> を返します。
}

// 簡潔にするために、ここではマウス イベントは省略します。
const FollowMouse = props => {
 const { コンテンツ } = props;
 const customContent = React.isValidElement ? コンテンツ: <span>{ コンテンツ }</span>
 定数 getOffset = () => {
  戻る {
   位置: '絶対'、
   上: ...,
   左： ...、
  }
 }
 const renderContent = React.cloneElement(custonContent, {
  スタイル: {
   ...オフセット取得()
  }
 })
 <div>{renderContent() }</div> を返します。
}

const ComponentButton = props => {
 const { addonAfter, children } = props;
 const button = <button key='button'>{ children }</button>
 const list = [button, addonAfter ? React.cloneElement(addonAfter, { key: 'button-addon' } : null)
 <div>{リスト} <div> を返す
}