如何在 React 和 JSX 中渲染動態元件名稱？

React 和JSX 中的動態元件名稱

在React 中，動態元件渲染可讓您在執行時間根據元件的類型建立元件。為了說明這一點，請考慮以下範例：

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent />

React/JSX 動態元件名稱執行緒中建議的早期解決方案由於語法差異而導致編譯錯誤。作為替代方案，可以為每個元件建立一個單獨的方法：

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

但是，這種方法需要為每個元件建立一個新方法，這可能會很麻煩。

幸運的是，有一個更優雅的解決方案是將元件類型作為字串傳遞給 React.createElement() 函數。此函數使用提供的類型呈現元件。例如：

var MyComponent = Components[type + "Component"];
return <MyComponent />;

此程式碼編譯為：

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

以上是如何在 React 和 JSX 中渲染動態元件名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！