Reactのこの3つのドットは何をしているのでしょうか？質問する

Question

それはプロパティスプレッド表記これはES2018で追加されました（配列/反復可能オブジェクトのスプレッドはそれより前のES2015でした）が、Reactプロジェクトではトランスパイルを通じて長い間サポートされてきました（「JSX スプレッド属性「属性だけでなく、他の場所でも実行できますが。」

{...this.props} propsは、作成する要素の個別のプロパティとして、の「独自の」列挙可能なプロパティを展開しますModal。たとえば、とがthis.props含まれている場合、a: 1b: 2

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

同じになります

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

ただし、これは動的であるため、「独自の」プロパティが含まれているものはすべてprops含まれます。

childrenはの「独自の」プロパティなので、propsスプレッドはそれを含めます。したがって、これが出現するコンポーネントに子要素がある場合、それらはに渡されますModal。開始タグと終了タグの間に子要素を配置することは、開始タグにプロパティを配置するための単なる構文上の糖衣 (良い種類の糖衣) ですchildren。例:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

スプレッド表記法は、そのようなユースケースだけでなく、既存のオブジェクトのほとんど (またはすべて) のプロパティを持つ新しいオブジェクトを作成する場合にも便利です。これは、状態を直接変更できないため、状態を更新するときによく発生します。

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

これは、プロパティを除いてthis.state.fooと同じプロパティをすべて持つ新しいオブジェクトに置き換えられ、次のようになります。fooa"updated"

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);

.as-console-wrapper {
  max-height: 100% !important;
}

Answer 1