Seleccionar un componente dinámico en React

Para renderizar uno de varios componentes en React, asigna cada categoría permitida a una función de componente, busca la función seleccionada y renderízala mediante una variable JSX en mayúscula. Una cadena de categoría como "text" puede elegir un componente, pero construir un nombre de componente como una cadena no convierte esa cadena en una referencia a una variable de JavaScript.

Nombres de componentes dinámicos y JSX

JSX es una sintaxis para describir la interfaz de usuario, no un mecanismo independiente de búsqueda de componentes. En JSX, un nombre en minúscula como <section> denota un elemento HTML incorporado, mientras que un identificador en mayúscula como <SomeComponent /> se refiere a una variable de JavaScript en el ámbito. Esa variable debe contener la función del componente u otro tipo de componente compatible.

JSX se transforma según la configuración del compilador del proyecto. Algunas configuraciones usan React.createElement; otras usan un entorno de ejecución diferente, por lo que las llamadas exactas generadas dependen de la configuración. React.createElement es una función que puede crear un elemento de React cuando se le proporciona un tipo de elemento compatible y props.

Nombre de componente dinámico en React

Supongamos que un blog puede mostrar contenido de texto, video o imagen. Primero define esos componentes y luego elige entre sus referencias. Concatenar un nombre produce solo una cadena:

const SomeComponent = category + "Component";

Por ejemplo, si category es "Text", SomeComponent se convierte en "TextComponent". JSX no usa esa cadena para buscar en el ámbito de JavaScript una variable con el mismo nombre. Una cadena puede representar una etiqueta HTML incorporada en las API que admiten tipos de elemento como cadena, pero no resuelve una variable de componente personalizado. Cambiar la capitalización de la cadena no cambia su tipo ni la convierte en una referencia a un componente.

Forma correcta de tener un nombre de componente dinámico en React

Crea una asignación explícita de los valores de categoría permitidos a los componentes ya definidos. Busca la referencia seleccionada, comprueba que la categoría sea compatible y renderiza la referencia usando un identificador JSX en mayúscula:

Este ejemplo completo de JavaScript mantiene las opciones de componentes en un único objeto de valores permitidos. Cada función devuelve una etiqueta para que el flujo de selección pueda ejecutarse en Node.js sin una configuración de compilación de React.

function TextComponent() {
  return "Text content";
}

function VideoComponent() {
  return "Video content";
}

function PictureComponent() {
  return "Picture content";
}

const componentByCategory = {
  text: TextComponent,
  video: VideoComponent,
  picture: PictureComponent
};

const category = "text";

if (Object.hasOwn(componentByCategory, category)) {
  const SelectedComponent = componentByCategory[category];
  console.log(SelectedComponent());
} else {
  console.log("Unsupported category");
}

Text content

En un componente de React, usa la misma comprobación de clave propia antes de leer la asignación y luego renderiza la referencia seleccionada con JSX, por ejemplo, return <SelectedComponent />;. Una categoría solo es compatible cuando es una clave propia de componentByCategory; los nombres heredados como toString también van a la alternativa de respaldo. Elige lo que debe mostrar la interfaz, como un componente de respaldo o un mensaje, en lugar de intentar renderizar una referencia ausente. Mantén esta asignación como una lista de valores permitidos: la entrada del usuario puede seleccionar una de sus entradas definidas, pero no debe convertirse en un nombre de componente o una ruta de importación arbitrarios.

El ejemplo de CodeSandbox proporcionado se puede usar para explorar la configuración original de los componentes de texto, video e imagen. En una aplicación, sustituye la categoría de ejemplo por el valor seleccionado por el usuario y conserva la asignación explícita y el comportamiento de respaldo.