cloneElement

const clonedElement = cloneElement(element, props, ...children)

• リファレンス
  • cloneElement(element, props, ...children)
• 使用法
  • 要素�? props を上書きする
• 代替手�?�
  • レンダープロップを用いてデータを渡す
  • コンテクストでデータを渡す
  • ロジックをカスタムフックに抽出する

リファレンス

cloneElement(element, props, ...children)

cloneElement を呼び出して、element を基に、異なる props と children を持った React 要素を作成します。

import { cloneElement } from 'react';

// ...
const clonedElement = cloneElement(
  <Row title="Cabbage">
    Hello
  </Row>,
  { isHighlighted: true },
  'Goodbye'
);

console.log(clonedElement); // <Row title="Cabbage" isHighlighted={true}>Goodbye</Row>

さらに例を見る

引数

• element: element 引数は有効な React 要素でなければなりません。例えば、<Something /> �?ような JSX ノード、createElement �?呼び出し結果、または別�? cloneElement �?呼び出し結果などです。

• props: props 引数はオブジェクトか null でなければなりません。null を渡すと、クローンされた要素は元�? element.props をすべて保持します。それ以外�?場合、props オブジェクト内�?すべて�?項�?について、返される要素では element.props �?値よりも props から�?値が「優先」されます。�?�り�? props は元�? element.props から埋められます。props.key や props.ref を渡した場合、それらは元�?も�?を�?き換えます。

• 省略可能 ...children: ゼロ個以上�?子ノード。あらゆる React ノード、つまり React 要素、文字列、数値、ポータル、空ノード（null、undefined、true、false）、React ノード�?配列になります。...children 引数を渡さない場合、元�? element.props.children が保持されます。

返り値

cloneElement は以下�?プロパティを持つ React 要素オブジェクトを返します。

• type: element.type と同じ。
• props: element.props に、渡された上書き用�? props を浅くマージした結果。
• ref: 元�? element.ref。ただし、props.ref によって上書きされた場合は除く。
• key: 元�? element.key。ただし、props.key によって上書きされた場合は除く。

通常、こ�?要素をコンポーネントから返すか、他�?要素�?子として用います。要素�?プロパティを読み取ることは可能ですが、作成後は要素�?構造を非公開 (opaque) として扱い、レンダー�?み行うようにするべきです。

注意点

• 要素をクローンしても元�?要素は変更されません。

• 複数�?子�?内�?�がすべて静的に分かっている場合、cloneElement には子を cloneElement(element, null, child1, child2, child3) �?ように複数�?引数として渡してください。子が動的な場合は、配列全体を第 3 引数として cloneElement(element, null, listItems) �?ように渡してください。これにより、React は動的なリストに key が欠けている場合に警告を出すようになります。静的なリストでは並び替えは決して発生しないため、key は必要ありません。

• cloneElement を使うとデータフロー�?追跡が難しくなるため、代わりに代替手�?�を試してみてください。

使用法

要素�? props を上書きする

React 要素 �? props を上書きするには、それを cloneElement に渡し、上書きしたい props を指�?�します。

import { cloneElement } from 'react';

// ...
const clonedElement = cloneElement(
  <Row title="Cabbage" />,
  { isHighlighted: true }
);

こ�?場合、結果となるクローンされた要素は <Row title="Cabbage" isHighlighted={true} /> になります。

例を使って、これが役立つ場面を見てみましょう。

選択可能な行�?リストと、選択されている行を変更する “Next” ボタンをレンダーする List コンポーネントを想像してみてください。List コンポーネントは、選択された Row を異なる方法でレンダーする必要があるため、受け取ったすべて�? <Row> をクローンし、isHighlighted: true または isHighlighted: false を追加�? props として指�?�します。

export default function List({ children }) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className="List">
      {Children.map(children, (child, index) =>
        cloneElement(child, {
          isHighlighted: index === selectedIndex 
        })
      )}

例えば List が受け取る元�? JSX が以下�?ようなも�?である場合を考えます。

<List>
  <Row title="Cabbage" />
  <Row title="Garlic" />
  <Row title="Apple" />
</List>

子要素をクローンすることで、List は内部�?すべて�? Row に追加情報を渡すことができます。結果は以下�?ようになります。

<List>
  <Row
    title="Cabbage"
    isHighlighted={true} 
  />
  <Row
    title="Garlic"
    isHighlighted={false} 
  />
  <Row
    title="Apple"
    isHighlighted={false} 
  />
</List>

“Next” を押すと List �? state が更新され、異なる行がハイライトされることに着�?してください。

おさらいすると、List は受け取った <Row /> 要素をクローンし、それらに追加�? props を付加したということです。

代替手�?�

レンダープロップを用いてデータを渡す

cloneElement を使用する代わりに、renderItem �?ようなレンダープロップ (render prop) を受け取るようにすることを検討してみてください。以下�?例では、List は renderItem を props として受け取ります。List は各アイテムに対して renderItem を呼び出し、isHighlighted を引数として渡します。

export default function List({ items, renderItem }) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className="List">
      {items.map((item, index) => {
        const isHighlighted = index === selectedIndex;
        return renderItem(item, isHighlighted);
      })}

renderItem �?ようなも�?は「レンダープロップ」と呼ばれます。何かをレンダーする方法を指�?�するため�? props だからです。例えば、与えられた isHighlighted �?値で <Row> をレンダーする renderItem �?�?�装を渡すことができます。

<List
  items={products}
  renderItem={(product, isHighlighted) =>
    <Row
      key={product.id}
      title={product.title}
      isHighlighted={isHighlighted}
    />
  }
/>

最終的な結果は cloneElement と同じです。

<List>
  <Row
    title="Cabbage"
    isHighlighted={true} 
  />
  <Row
    title="Garlic"
    isHighlighted={false} 
  />
  <Row
    title="Apple"
    isHighlighted={false} 
  />
</List>

しかし、isHighlighted 値がどこから来ているかを明確に追跡することができます。

こ�?パターンはより明示的であるため、cloneElement よりも推奨されます。

コンテクストでデータを渡す

cloneElement �?別�?代替手�?�としてコンテクストを通じてデータを渡すことが可能です。

例として、createContext を呼び出して HighlightContext を�?�義しましょう。

export const HighlightContext = createContext(false);

List コンポーネントは、レンダーするすべて�?アイテムを HighlightContext プロバイダでラップします。

export default function List({ items, renderItem }) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className="List">
      {items.map((item, index) => {
        const isHighlighted = index === selectedIndex;
        return (
          <HighlightContext.Provider key={item.id} value={isHighlighted}>
            {renderItem(item)}
          </HighlightContext.Provider>
        );
      })}

こ�?アプローチでは、Row は props で isHighlighted を受け取る必要が一切ありません。代わりにコンテクストから読み取ります。

export default function Row({ title }) {
  const isHighlighted = useContext(HighlightContext);
  // ...

これにより、呼び出し元�?コンポーネントは <Row> に isHighlighted を渡すことについて知る必要も、気にする必要もなくなります。

<List
  items={products}
  renderItem={product =>
    <Row title={product.title} />
  }
/>

代わりに、List と Row はコンテクストを通じ、ハイライト�?ロジックに関して協調して動作します。

コンテクストを通じてデータを深く渡す方法について詳しく学ぶ

ロジックをカスタムフックに抽出する

試すべき別�?アプローチは、「非視覚的」なロジックを自前�?フックに抽出し、フックから返される情報を使用して何をレンダーするかを決�?�することです。例えば次�?ような useList カスタムフックを書くことができます。

import { useState } from 'react';

export default function useList(items) {
  const [selectedIndex, setSelectedIndex] = useState(0);

  function onNext() {
    setSelectedIndex(i =>
      (i + 1) % items.length
    );
  }

  const selected = items[selectedIndex];
  return [selected, onNext];
}

これを以下�?ように使用できます。

export default function App() {
  const [selected, onNext] = useList(products);
  return (
    <div className="List">
      {products.map(product =>
        <Row
          key={product.id}
          title={product.title}
          isHighlighted={selected === product}
        />
      )}
      <hr />
      <button onClick={onNext}>
        Next
      </button>
    </div>
  );
}

データフローは明示的ですが、state は任意�?コンポーネントから使用できる useList カスタムフック内にあります。

こ�?アプローチは、特にこ�?ロジックを異なるコンポーネント間で再利用したい場合に有用です。