在 Reactjs { ... this. props }是什么意思

这是什么意思

{...this.props}

我正在尝试这样使用它

 <div {...this.props}> Content Here </div>
143869 次浏览
小开
最佳答案

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

让我们假设您有一个接受 N 个属性的组件。如果数量增加，传递这些信息可能是乏味和笨重的。

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

因此，您可以这样做，将它们包装在一个对象中，并使用扩展符号

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

它将把它解压到组件上的道具中，也就是说，只有当你将道具传递给另一个组件时，你“永远”不会在 render()函数中使用 {... props}。使用你的未包装道具作为正常的 this.props.x。

小开

这是 ES-6的功能。这意味着你提取的所有属性的道具 div.{... }

运算符用于提取对象的属性。

小开

是 ES6Spread_operator和 Destructuring_assignment。

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

等于 Class Component

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

enter image description here

或 Function component

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

enter image description here

裁判

小开

它将汇编成这样:

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

正如你可以看到上面，它通过它的所有道具的 div。

小开

您将在子组件中使用道具

比如说

如果你现在的组件道具是

{
booking: 4,
isDisable: false
}

你可以把这个道具用在你的儿童漫画里

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

在您的子组件中，您将收到您的所有父道具。

小开

我们可以在 nextJS 中传递道具，例如:

            <Component {...{
props,
allCount: count?.lenght,
}} />
小开

Props 是包含我们传递给父组件的 Attritribute 的对象


提交答案