Как синтаксис {... props} передает свои свойства субкомпоненту?

Question

Используя React-Router, я узнал, что вы можете передать свойства маршрута компоненту следующим образом:

<Route path="/lyrics/track/:id" render={props => (
    <Component {...props} title={"gah"} content={"blabla"}  />
</Route>

И каким-то образом это добавляет свойства переменной props, которая является RouteComponentProps к this.props переменная Component, так что теперь в Component я могу сделать, например:

<p>{this.props.title}</p>
<p>{this.props.content}</p>
<p>{this.props.match.params.id}</p>

Я просто запутался в синтаксисе {...props} и в том, как это работает, как кто-то относительно новичок в Javascript,Это работает, потому что обе переменные имеют одно и то же имя?Почему это так, что эти свойства добавляются к этой конкретной переменной?

Answer 1

Распространение само по себе не имеет ничего общего с именем переменной.

В JSX все, что вы объявляете внутри тега, становится свойством объекта props компонента.

Все, что вы делаете в этом случае, это получение реквизита отмаршрут и сделать их доступными для компонента с помощью оператора распространения ..., который будет работать для любого данного объекта.

Если бы у вас был другой объект, который выглядел как foobar = { foo: true, bar: false }, вы бы такжебыть в состоянии распространить этот объект в подпорки компонента.

<Component {...props} {...foobar} title={"gah"} content={"blabla"}  />

Это приведет к тому, что свойства foo и bar также будут доступны внутри подпорок компонента.

Answer 2

... используется для распределения значений в любой переменной.

когда вы передаете ...props в Component, вы получите все свойства из переменной props.

Узнайте больше о Синтаксис распространения