[解決済み] Reactのこの3つの点は何をするところなのでしょうか？

質問

とは何ですか？ ... このReact（JSXを使用）のコードで行うことと、その名前は何でしょうか？

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

解決方法は？

それは プロパティスプレッド表記 . ES2018で追加されましたが（配列/イテラブルに対するspreadはそれ以前のES2015）、Reactのプロジェクトでは以前からトランスパイルでサポートされています（".として）。 JSX拡散属性 "属性だけでなく、他の場所でもできるのにね）。

{...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}>

しかし、これは動的なものなので、どのようなquot;own"プロパティが props が含まれます。

以来 children のプロパティです。 props の場合、spread はそれを含む。つまり、これが表示されるコンポーネントに子要素があった場合、その子要素は 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>

Spread記法は、このような用途だけでなく、既存のオブジェクトのプロパティのほとんど（またはすべて）を持つ新しいオブジェクトを作成する場合にも便利です。

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

を置き換えます。 this.state.foo と同じプロパティを持つ新しいオブジェクトに変更します。 foo ただし a プロパティになり "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;
}