Что означает {… this.props} в Reactjs

В чем смысл

{...this.props}

Я пытаюсь использовать это так

 <div {...this.props}> Content Here </div>
73 голоса | спросил Swaraj ghosh 11 FebruaryEurope/MoscowbWed, 11 Feb 2015 13:47:33 +0300000000pmWed, 11 Feb 2015 13:47:33 +030015 2015, 13:47:33

4 ответа


0

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

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

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

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

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

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

ответил Henrik Andersson 11 FebruaryEurope/MoscowbWed, 11 Feb 2015 13:50:25 +0300000000pmWed, 11 Feb 2015 13:50:25 +030015 2015, 13:50:25
0

Это 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
);

 введите описание изображения здесь

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

ответил 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 06 Sep 2017 06:35:25 +0300 2017, 06:35:25
0

Это скомпилируется в это:

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

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

ответил Vad 7 +03002017-10-07T18:28:47+03:00312017bEurope/MoscowSat, 07 Oct 2017 18:28:47 +0300 2017, 18:28:47
0

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

Оператор

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

ответил Mayank Soni 11 AMpTue, 11 Apr 2017 08:34:28 +030034Tuesday 2017, 08:34:28

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132