为什么在函数调用之前需要"..."函数调用，该函数调用在 React 中使用打字稿的映射函数内作为表达式传递

Question

因此，我试图呈现一个项目列表，并希望根据某个道具的值设置背景样式。

我选择使用.map函数。

代码如下：

itemCards.map((item) => 
<div key= {item.id} className={'list_card'} {getCardColor(item)}>

这里的问题是Typescript坚持我将排列运算符(…(放在getColorCard的函数调用之前。

所以它应该是这样的：

itemCards.map((item) => 
<div key= {item.id} className={'list_card'} {...getCardColor(item)}>

函数getCardColor看起来像这样：

function getCardColor(item: ItemCard): React.CSSProperties {
if(item.priority === null){
return ({background:"red"})
}
return ({background:"black"})
}

它有效。

我的问题是，在我的情况下，为什么在函数调用之前需要一个排列运算符？

如果以前问过这个问题，我很抱歉，但我不知道如何在谷歌上搜索。

编辑：我放入了getCardColor返回的

Answer 1

JSX语法本质上转换为调用一个函数并向其传递一个参数，该参数是一个由道具及其值组成的对象。

<Func foo="bar" />

大致相同于：

const props = { foo: "bar" };
Func(props);

---

如果您有一个对象已经有了一些道具和值，那么您可以使用扩散操作符来组合两个对象。

<Func foo="bar" a={1} />
const moreProps = { a: 1 };
const props = { foo: "bar", ...moreProps };
Func(props);

---

您可以在JSX:内进行扩展

<Func foo="bar" {...moreProps} />

但你不能就这么一个价值观。

---

const props = { "a value" };

这是JS中的一个错误。

---

所以你必须扩散函数的返回值。

---

但是，您的函数返回undefined，所以像这样将其放在JSX的中间首先是毫无意义的。