React コンポーネントのプロパティで「...」 (スプレッド構文) は何をしますか?

React の 3 つの点の目的を理解する

React を使用する場合、3 つの点 (...) に遭遇することがあります。プロパティスプレッド表記法として知られています。このスニペットでは:

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

「...」はプロパティの展開を実行し、this.props から列挙可能なプロパティを抽出し、それらを Modal 要素の個別のプロパティとして配布します。

たとえば、 this.props に { a: 1, b: 2 } が含まれている場合、上記のコードは類似していますto:

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

this.props の正確な内容に関係なく、スプレッド表記では、その中にある「独自の」プロパティがすべて含まれることが保証されます。

特に、子は「独自」とみなされます。プロパティなので、Modal コンポーネントにも渡されます。このメカニズムにより、子要素を親コンポーネントの開始タグと終了タグの間に配置できます。これは、子を含める一般的で便利な構文です。

説明すると、

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

この例では、たとえば、Example は className と子を小道具として受け入れます。 Example 内に配置された子コンポーネントまたは子要素は、子のプロパティに割り当てられます。

最終的に、React のプロパティ スプレッド表記は、親コンポーネントから子にプロパティを伝播する便利な方法を提供し、コードベースを合理化および簡素化します。

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