Nombre del componente dinámico en React

1. Nombres de componentes dinámicos y JSX
2. Nombre del componente dinámico en React

React es una de las opciones más populares para crear una interfaz de usuario. Puede usar React para responder de inmediato a las acciones de los usuarios, como mostrar y ocultar contenido de forma dinámica, aplicar estilos CSS de forma condicional y más.

En este artículo, hablaremos sobre los nombres de componentes dinámicos en React.

Nombres de componentes dinámicos y JSX

Para comprender cómo cambiar dinámicamente el nombre del componente renderizado en React, primero debemos comprender el lenguaje de plantillas JSX.

JSX es el lenguaje de plantillas predeterminado para React. Permite a los desarrolladores de React crear una jerarquía ordenada de componentes de forma declarativa.

JSX permite a los desarrolladores crear aplicaciones React más rápido de lo que lo harían con la API React de nivel superior.

Es importante comprender que JSX es solo una sintaxis que es fácil de escribir y leer. Bajo el capó, todas las aplicaciones de React se componen de llamadas complejas a métodos en la API de nivel superior de React, como createElement(), createFactory(), cloneElement(), y más.

Nombre del componente dinámico en React

Imaginemos que tiene un blog y desea representar dinámicamente diferentes tipos de componentes: texto, video o imagen.

Primero, debe tener componentes definidos y creados antes de invocarlos. No puede generarlos dinámicamente; sin embargo, puede invocar declarativamente <SomeComponent>, que puede interpretarse como diferentes componentes, según los valores dinámicos.

Escribir <SomeComponent> en JSX se traduce a la API de nivel nativo de React como una llamada al método React.createElement(SomeComponent, {}). El primer argumento del método React.createElement() debe ser una etiqueta HTML o una función; por lo tanto, la variable SomeComponent debe hacer referencia a un elemento HTML o un componente.

Los principiantes a menudo se equivocan al generar el nombre del componente dinámicamente y almacenarlo en una variable como una cadena. Esto es incorrecto porque el primer argumento del método React.createElement() no puede ser una cadena simple.

Por ejemplo, esto está mal:

var category = "Text";
var SomeComponent = category + "Component";
return <SomeComponent />;

A primera vista, todo en el fragmento de código debería funcionar bien, pero incluso si el valor de la cadena está en mayúsculas, esto no funcionará porque la variable SomeComponent contendrá un valor de cadena. En su lugar, debe ser un componente de React válido (o una etiqueta HTML).

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

Cree un objeto con nombres de propiedad para cada tipo de componente. El valor de estas propiedades debe hacer referencia a los componentes reales de React.

Luego puede tener una variable con una cadena generada dinámicamente y usar esta variable para hacer referencia a uno de los componentes almacenados en el objeto.

Veamos el código real:

export default function App() {
  const componentNames = {
    text: TextComponent,
    video: VideoComponent,
    picture: PictureComponent
  };
  var category = "text";
  var SomeComponent = componentNames[category];
  return (
    <div className="App">
      <SomeComponent />
    </div>
  );
}

function TextComponent() {
  return (
    <div>
      <h1>I am a dynamically named Text Component</h1>
    </div>
  );
}
function VideoComponent() {
  return (
    <div>
      <h1>I am a dynamically named Video Component</h1>
    </div>
  );
}
function PictureComponent() {
  return (
    <div>
      <h1>I am a dynamically named Picture Component</h1>
    </div>
  );
}

Puede probar y editar el código usted mismo en CodeSandbox.

Aquí tenemos un ejemplo básico de un componente padre y tres hijos. Técnicamente, el elemento principal solo tiene un componente secundario, pero los tres componentes: TextComponent, VideoComponent y PictureComponent pueden ocupar su lugar, según el valor de la variable category.

Actualmente, la variable categoría se establece en texto; lo usamos para buscar el TextComponent correspondiente en el objeto componentNames. Una vez que determinamos qué tipo de componente necesitamos, lo almacenamos en la variable SomeComponent.

En nuestro componente App, invocamos la variable SomeComponent, que puede hacer referencia a tres componentes diferentes, según el valor de la cadena en la variable category.

Esta es una característica poderosa que puede usar para renderizar o no renderizar ciertos componentes dinámicamente. En este caso, tenemos un valor de cadena estático; sin embargo, puede recopilar y usar la entrada del usuario para determinar qué componentes se deben representar y cuáles se pueden omitir.