将react props作为对象传递

Question

我觉得这个语法很奇怪。

<>
{items.map((item, i) => {
return <ItemComponent key={i} {...{ [resourceName]: item }} />;
})}
</>

你能解释一下吗?我知道在Parent组件中现在我得到了name道具，但是IDK这是怎么发生的…

Answer 1

我没有完整的上下文，所以我的猜测是:

resourceName是一个变量，描述将在ItemComponent上设置哪个道具。

你不能写resourceName={item}，因为这样ItemComponent就会有一个属性"resourceName"而不是存储在resourceName中的任何值

因此，解决这个问题的方法是创建一个对象，其中只有一个键是与item对象相关联的resourceName的值:

const itemComponentProps = {
[resourceName]: item;
};

---

如果你不熟悉这个语法，它是在对象上使用动态键。

的例子:

const dynamicKey = 'foo';
const obj = {
[dynamicKey]: 'bar'
}
console.log(obj[dynamicKey]); // bar
console.log(obj.foo); // bar

---

你将这个对象扩展到组件:

<ItemComponent key={i} {...itemComponentProps} />