Reactjs 中的 {...this.props} 是什么意思 [英] What is the meaning of {...this.props} in Reactjs

问题描述

是什么意思

{...this.props}

我正在尝试这样使用它

 
此处的内容

解决方案

它叫做 传播属性，其目的是让道具的传递更容易.

让我们假设您有一个接受 N 个属性的组件.如果数量增加，将这些传递下去可能会变得乏味和笨拙.

<组件 x={} y={} z={}/>

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

var props = { x: 1, y: 1, z:1 };<组件{...道具}/>

它将把它解压到你的组件上的 props 中，也就是说，你从不"在你的 render() 函数中使用 {... props}，只有当您将道具传递给另一个组件.像平常一样使用你的解压道具this.props.x.

What is the meaning of

{...this.props}

I am trying to use it like that

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

解决方案

It's called spread attributes and its aim is to make the passing of props easier.

Let us imagine that you have a component that accepts N number of properties. Passing these down can be tedious and unwieldy if the number grows.

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

Thus instead you do this, wrap them up in an object and use the spread notation

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

which will unpack it into the props on your component, i.e., you "never" use {... props} inside your render() function, only when you pass the props down to another component. Use your unpacked props as normal this.props.x.

这篇关于Reactjs 中的 {...this.props} 是什么意思的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！