如何在 React/JSX 中動態渲染元件？

Dynamic Component Rendering in React/JSX

React's JSX allows for declarative component rendering, but sometimes developers may need to dynamically render components based on their type.

The Issue

When attempting to render a component dynamically using the code snippet below, an error occurs:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Error: expected XML, got array

The error arises because the code uses array syntax while the JSX expects XML. Other solutions, such as creating a method for each component, are not elegant.

The Solution

The React documentation now provides an official solution for dynamic component rendering:

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

This code compiles to:

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

The variable MyComponent stores the component class and is capitalized. The React.createElement function then uses this class to create the component element.

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