В чем смысл {... this.props} в Reactjs

В чем смысл

{...this.props}

Я пытаюсь использовать его таким образом

 <div {...this.props}> Content Here </div>

Ответ 1

Он назвал атрибуты распространения и его цель - облегчить прохождение реквизита.

Представим себе, что у вас есть компонент, который принимает N количество свойств. Передача этих данных может быть утомительной и громоздкой, если число растет.

<Component x={} y={} z={} />

Таким образом, вместо этого вы делаете это, завершаете их в объект и используете разметку с расширением

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

который распакует его в реквизиты вашего компонента, т.е. вы никогда не будете использовать {... props} внутри вашей функции render(), только когда вы передадите реквизиты на другой компонент. Используйте ваши распакованные реквизиты как обычно this.props.x.

Ответ 2

Это ES6 Spread_operator и Destructuring_assignment.

<div {...this.props}>
  Content Here
</div>

Это равно компоненту класса:

const person = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

class TestDemo extends React.Component {
    render() {
        const {name, age, country} = {...this.props};
        // const {name, age, country} = this.props;
        return (
          <div>
              <h3> Person Information: </h3>
              <ul>
                <li>name={name}</li>
                <li>age={age}</li>
                <li>country={country}</li>
              </ul>
          </div>
        );
    }
}

ReactDOM.render(
    <TestDemo {...person}/>
    , mountNode
);

Функциональный компонент

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    <div
        name={props.name}
        age={props.age}
        country={props.country}>
        Content Here
        <ul>
          <li>name={props.name}</li>
          <li>age={props.age}</li>
          <li>country={props.country}</li>
        </ul>
    </div>
  );
};

ReactDOM.render(
    <div>
        <Test {...props}/>
        <hr/>
        <Test 
            name={props.name}
            age={props.age}
            country={props.country}
        />
    </div>
    , mountNode
);

Для более подробной информации, смотрите следующие ссылки:

Ответ 3

Это особенность ES-6. Это означает, что вы извлекаете все свойства реквизита в div.{... }

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

Ответ 4

Он скомпилирует это:

React.createElement('div', this.props, 'Content Here');

Как вы можете видеть выше, он передает все реквизиты div.

Ответ 5

Вы будете использовать реквизит в своем дочернем компоненте

например

если ваш компонент сейчас реквизит

{
   booking: 4,
   isDisable: false
}

Вы можете использовать этот реквизит в вашем ребенке compoenet

 <div {...this.props}> ... </div>

в вашем дочернем компоненте вы получите все свои родительские реквизиты.

Ответ 6

Когда мы используем наши определенные компоненты, мы можем добавлять атрибуты, называемые реквизитами. Эти атрибуты доступны в нашем компоненте как this.props и могут использоваться в нашем методе визуализации для отображения динамических данных:

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
});

React.render(<MyComponent name="Handsome" />, document.getElementById('myDiv'));

Также вы можете проверить здесь reactjs