声明后将属性添加到JSX.Element

Question

如果我有一个元素，比如这样的字典：

let item = {
    element: <myElement/>,
    color: "#0e76a8"
}

我可以在render（）中将style属性添加到item.element吗？

我想像这样的东西可以正常工作，但不能

return (
        <div>
            {<item.element style={{ color: "item.color" }/>}
        </div>
    );

JSX或React中是否有一种方法可以实现我想要的？

注意：我的目标是无法更改item.color。这只是我需要的抽象，因为在我的代码中，我将具有不同的item变量列表，并为每个变量提供所需的属性，我不想在JSX中对其进行硬编码，以便在任何情况下都更容易找到未来的变化。

Answer 1

您已经知道，在JSX中的函数引用周围放置<和>将应用该功能组件。

在定义item对象时，您不想应用组件，而只想保留对它的引用以供以后使用：

let item = {
    element: myElement,
    color: "#0e76a8"
}

此外，作为noted in comments，您将color CSS样式设置为字符串"item.color"，而我们可以放心地假设您的意思是color: item.color

Answer 2

我想你想这样做：

return (
        <div>
            {<item.element style={{ color: item.color }/>}
        </div>
    );