Reactjs中{… this.props}的含义是什么？

是什么意思

{...this.props} 

我正在尝试使用它

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

Answer 1

它被称为传播属性 ，其目的是使道具的传递更容易。

让我们想象你有一个接受N个属性的组件。 如果这些数字增长的话，将这些数据传递下来可能是单调乏味的。

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

因此，你可以这样做，把它们包装在一个对象中，并使用传播符号

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

这会将它解压缩到你的组件的道具上，也就是说，只有当你将道具传递给另一个组件时，你才不会在你的render()函数中使用{... props} 。 正常使用你的解压缩道具this.props.x 。

Answer 2

这是ES-6function。 这意味着你提取道具的所有属性在div中。 {…}运算符用于提取对象的属性。

Answer 3

这是ES6 Spread_operator ＆ Destructuring_assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

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

它等于

类组件

REPL： https ： //jscomplete.com/repl/

 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 ); 

Answer 4

它会编译到这个：

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

正如你所看到的，它将所有的道具传递给div 。

Answer 5

当我们使用我们定义的组件时，我们可以添加称为道具的属性。 这些属性在我们的组件中可用，如this.props，并且可以在我们的render方法中用于呈现dynamic数据：

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

你也可以在这里结帐reactjs