聲明后向 JSX.Element 添加屬性

Question

如果我有一個元素，讓我們說一個這樣的字典：

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

我可以在 render() 中向 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"
}

此外，如評論中所述，您將color CSS 樣式設置為字符串"item.color" ，而我們可以安全地假設您的意思是color: item.color

Answer 2

我想你想這樣做：

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