Spread Operator を使用して React ですべての props を渡す

Web 開発者が React を気に入っているのは、再利用可能なコンポーネントを作成し、不要なコードを書かなくても済むためです。 ただし、コンポーネントの再利用は、特定の要素を格納する変数名を付けて繰り返しを避けるだけではありません。

React のコンポーネント システムは高度であり、子コンポーネントの内部コンテンツ、外観、さらには機能をカスタマイズできます。 親から子に値を渡すために使用される props オブジェクトのおかげで可能です。

この記事では、すべての props を子に渡し、子コンポーネント内で props を介して渡される予測できない数の値を処理する方法について説明します。

Spread (...) 演算子を使用してすべての props を渡す

spread 構文は、JavaScript の新しい機能です。 配列、文字列、およびオブジェクトで使用すると、さまざまな機能があります。 この場合、props オブジェクトを使用して、親から子に値を渡します。

spread 構文は単純です。 複数のプロパティを持つオブジェクトがあるとします。

const obj {
    propertyOne: 1,
    propertyTwo: 2,
    propertyThree: 3,
    propertyFour: 4
}

3つのドット (...) を使用して、すべての key-value ペアを別のオブジェクトにコピーできます。

const copy = {...obj}

props を使用する場合、props オブジェクトには、手動で渡したいすべてのプロパティが格納されます。 別の props オブジェクトがある場合は、同じ spread 構文を使用して、既存のオブジェクトのすべての値をコピーして渡すことができます。

以下の例を見てみましょう。

export default function App() {
  const props = { firstName: "Irakli", lastName: "Tchigladze" };
  return (
    <div className="App">
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

このように、<Hello> コンポーネントの属性を 1つずつ設定する必要はありません。 代わりに、props オブジェクトのすべてのプロパティが子コンポーネントで利用可能になります。 たとえば、以下の上記のコード フェンスの出力を参照してください。

出力：

Hello, Irakli Tchigladze

1つを除くすべての props を渡す

props オブジェクトのいくつかの値を渡すこともできますが、1つまたは 2つのプロパティを除外します。

export default function App() {
  const props = { size: 20, firstName: "Irakli", lastName: "Tchigladze" };
  const { size, ...other } = props;
  return (
    <div className="App" style={{ fontSize: size }}>
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

この例では、props オブジェクトには size、firstName、lastName の 3つのプロパティがあります。

要素のスタイルを設定する (フォント サイズを指定する) ために size プロパティを安全に使用するために、分割を使用します。 しかし、残りのプロパティを <Child> コンポーネントに渡すことはできます。