Что означает {...это.реквизит} в Reactjs
что означает
{...this.props}
Я пытаюсь использовать его так
<div {...this.props}> Content Here </div>
4 ответов
Это называется распространение атрибутами и его цель сделать прохождение реквизит легче.
представим, что у вас есть компонент, который принимает N число свойств. Передача их вниз может быть утомительной и громоздкой, если число растет.
<Component x={} y={} z={} />
таким образом, вместо этого вы делаете это, оберните их в объект и используйте нотацию распространения
var props = { x: 1, y: 1, z:1 };
<Component {...props} />
который распакует его в реквизит на вашем компоненте, т. е. вы "никогда" не используете {... props}
внутри ваш render()
функция, только когда вы передаете реквизит вниз к другому компоненту. Используйте распакованные реквизит, как обычно this.props.x
.
это 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
);
для получения более подробной информации см. Следующее ссылки:
Он будет компилироваться на это:
React.createElement('div', this.props, 'Content Here');
Как вы можете видеть выше, он передает все это реквизит к div
.
это функция ES-6. Это означает, что вы извлекаете все свойства реквизита в
div.{... }
оператор используется для извлечения свойств объекта.