Incluir variable de reacción en una cadena

1. Incluir la variable React en una cadena usando la concatenación de cadenas
2. Incluir variable React en una cadena usando literales de plantilla

Hoy en día, React es probablemente la mejor biblioteca para crear aplicaciones web rápidas con funciones dinámicas. React usa un lenguaje de plantillas JSX, similar a HTML; sin embargo, tiene muchas ventajas, como permitirnos ejecutar expresiones de JavaScript siempre que estén encerradas entre llaves.

Incluir la variable React en una cadena usando la concatenación de cadenas

Es posible generar la cadena mediante concatenación simple dinámicamente. Puede concatenar varias cadenas utilizando el simple operador + o el método concat().

Por ejemplo, imagine que desea generar una cadena dinámica className. Imaginemos un ejemplo de cómo generar un valor className dinámico usando la concatenación de cadenas:

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={type + "Box"}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Iniciamos la variable de estado tipo en una cadena grande. En JSX, establecemos el atributo className del elemento <div> concatenando el valor de cadena de la variable tipo (grande) y la cadena Cuadro.

Si nos fijamos en el HTML fuente, veremos que la clase del contenedor es largeBox, como debe ser.

Podemos usar la función setType para cambiar el valor de la variable de estado tipo. El valor de cadena de className también cambiará.

Esto le permite cambiar dinámicamente el valor className del contenedor, lo que le permite personalizar la apariencia del componente.

Puede usar el mismo principio para concatenar más de dos cadenas. Si necesita espacios entre palabras, asegúrese de agregarlos manualmente:

<h1>{firstWord + " " + secondWord}</h1>

Nota: Para ejecutar expresiones de JavaScript dentro de JSX, debemos envolverlas con llaves.

Una demostración en vivo de este ejemplo está disponible en CodeSandbox, para que pueda ver cómo funciona la concatenación usted mismo.

Incluir variable React en una cadena usando literales de plantilla

Muchos front-end prefieren usar literales de plantilla más elegantes para presentar variables en una cadena. Parecen cuerdas normales; la única diferencia es que en lugar de usar comillas simples o dobles, usamos acentos graves (``) para marcar los literales de la plantilla.

También le permiten incrustar expresiones dentro de la cadena, usando el signo de dólar y llaves. Esta función se introdujo en ES6, por lo que es una adición relativamente nueva a JavaScript.

Veamos el primer ejemplo nuevamente, pero esta vez usamos literales de plantilla para incluir una variable en la cadena:

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={`${type}Box`}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

En este caso, la variable tipo se sustituirá por su valor de cadena. En última instancia, todavía tendremos un valor de cadena largeBox para el atributo className.

Los literales de plantilla suelen ser más legibles que la simple concatenación. Por ejemplo, poner espacios entre palabras es mucho más fácil cuando tiene muchas variables en la cadena.