Question

我是React的新手开发人员，几天前，我看到了一些我不理解的有趣语法。

在“视图”组件上有{... {key}}，我会改写key = {key}，完全一样吗？你有链接或解释吗？

print(df)

Answer 1

结果是相同的，它是使用扩展运算符...进行的结构分解和属性值速记分配的组合：

const key = 1;

// Property value shorthand assignment
{ key } // => { key: 1 }

// destructuring { key } object
{...{ key }} // => { key: 1 }

因此，在我的示例中，您最终将{ key: 1 }传递到了组件，这等同于传递了key={1}。

这是您想要的链接：

如果您已经具有props作为对象，并且想要在JSX中传递它，则可以使用...作为“ spread”运算符来传递整个props对象。

https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

Answer 2

请考虑您提供给<View>作为道具对象的属性。可以说

var variable = 2

写<View value={variable}>本质上就像写：

// value={variable} is the same as {value: variable}

props = {
  value: 2
}

但是，编写<View {...{variable}}>会使声明属性名称的效率降低，除非指定，否则它将始终与变量名称相同：

// {...{variable}} spreads out into {variable: variable}

props: {
  2: 2
}

// {...{value: variable}} spreads out into {value: variable}
// which is a slower way of writing value={variable}

第二种语法的唯一实际使用案例之一是快速传递您希望保持相同名称的多个变量：

<View {...{ user, firstName, lastName, email }}>
// rather than
<View user={user} firstName={firstName} lastName={lastName} email={email}>

该语法的主要缺点是，您不能自己编辑变量本身，而无需声明属性名称。例如，您可以使用第一种语法编写该代码：

value={variable + 2}

但您不能写：

{...{variable + 2}}

属性名称在哪里？您将必须编写：

{...{value: value + 2}}

再次，这是编写第一种语法的较慢的方式。

传播语法的一个稍微不同的用例是一次传递多个对象属性。例如，假设我们有这个对象：

var user = {
  firstName: 'foo',
  lastName: 'bar',
  email: 'foo@bar.com',
}

代替写作：

<View firstName={user.firstName} lastName={user.lastName} email={user.email}>

我们可以简单地写：

<View {...user}>

TL; DR
总体而言，要编写一长串只想传递给下一个组件的变量，请使用扩展语法（{...{variable1, variable2}}），否则，请使用常规语法（value={variable}），因为对传递给组件的内容拥有更多的控制权。

Answer 3

<View {...{ key }}>
  <Task/>
</View>

上面的代码实际上由多个部分组成

动态创建对象，使用您在循环时获得的key的任何值，将其分配给此新创建对象的属性，属性名称为“键”
< / li>
展开从步骤1创建的并用作View属性的对象

因此，最好改写在下面

<View key={key}>
...
</View>

Answer 4

是的，相同。

通常，您会看到这样写的映射：

tasks.map((task, index) =>

但改为写：

tasks.map((task, key) =>

您可以仅通过{...{key}}而不是编写key={index}来为该项分配密钥

这实际上取决于偏好。但是，我个人认为这只是非常基本的东西的不必要的“过度设计”。

{... {key}}是否与key = {key}相同以分配react属性？

4 个答案: