How to Dynamically Render Components in 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.

The above is the detailed content of How to Dynamically Render Components in React/JSX?. For more information, please follow other related articles on the PHP Chinese website!