React JSX での「...」 (スプレッド構文) は何をしますか?

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

React の JSX コード内の 3 つのドット (...) の目的は何ですか?

これらのインスタンス内のドットは、プロパティの広がりを表します表記。 ES2018 で導入され、トランスパイルによって React で長い間サポートされてきました。

プロパティ スプレッド表記を使用すると、あるオブジェクトの列挙可能なプロパティを別のオブジェクトのプロパティに「展開」できます。 React の場合、{...this.props} 構文は props オブジェクトのプロパティを Modal 要素に展開します。

たとえば、this.props に { a: 1, b: が含まれているとします。 2 }、次のコード:

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

は次と同等です:

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

プロパティスプレッド表記は動的です。つまり、実行時に props オブジェクトに存在するプロパティがすべて含まれます。これは、それぞれを明示的に宣言せずに、親コンポーネントから子コンポーネントに複数のプロパティを渡す場合に便利です。

子もプロパティのプロパティであるため、プロパティ スプレッド表記にはそれらが含まれます。したがって、親コンポーネントの開始タグと終了タグの間にレンダリングされた子要素はすべて、子コンポーネントに渡されます。

以上がReact JSX での「...」 (スプレッド構文) は何をしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。