プロパティスプレッド記法は React JSX での Prop の受け渡しをどのように簡素化しますか?

React JSX のプロパティ スプレッド表記

React は、プロパティ スプレッド表記を使用して JSX 構文を通じてコン​​ポーネントに props を渡す簡潔な方法を提供します。

とはプロパティのスプレッド表記 (...)?

3 つのドット、または...、提供されたコード スニペットでは、プロパティ スプレッド表記を表します。これにより、オブジェクトのプロパティをターゲット要素の個々のプロパティに分散できます。

どのように機能しますか?

コード例では、

<Modal {...this.props} title='Modal heading' animation={false}>

{...this.props} スプレッド記法は、this.props の列挙可能なすべての独自プロパティを Modal 要素の個別のプロパティとして展開します。これは、各プロパティを個別に書き出すことと同じです。

<Modal a={this.props.a} b={this.props.b} c={this.props.c} ... title='Modal heading' animation={false}>

ただし、スプレッド表記は、展開するオブジェクトに基づいてプロパティを動的に含めたり除外したりします。

子要素を含める

スプレッドされるオブジェクトに Children プロパティが含まれる場合、それはスプレッド表記に含まれます。これは、children が props オブジェクトの独自のプロパティであるためです。したがって、コンポーネントの開始タグと終了タグの間に配置された子要素は、子プロパティとしてターゲット要素に渡されます。

これを示すために、次の例を考えてみましょう:

class Example extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        {this.props.children}
      </div>
    );
  }
}

この場合、Example コンポーネントは className と子のプロパティを受け取ります。 Example 要素を子要素とともに渡すことは、子 prop を手動で設定することと同じです。

ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

プロパティ スプレッド表記を活用することで、React は最小限のオーバーヘッドで複数の props をコンポーネントに渡す便利で動的な方法を提供します。

以上がプロパティスプレッド記法は React JSX での Prop の受け渡しをどのように簡素化しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。