0
272
Views¿Cómo inyectar JavaScript dentro de la cadena del atributo JSX?
Estoy tratando de poner algunos accesorios predeterminados dentro className=" px-6 py-2 bg-black rounded-full text-black " y cuando use este componente en otro lugar, pasaré el fondo o el color del texto como accesorios.
¿Cuál es la sintaxis correcta para esta manipulación?
Estaba tratando de usar el acento grave ` con el clásico ${} pero no funciona en mi aplicación de reacción.
<button className=`btn px-6 py-2 bg-${} rounded-full`> shop </button> 
1 answers
Answer question0
Usaría una expresión JSX, que es {expression} (en un contexto JSX). Así que bien podría usar una plantilla literal, dentro de {} , como esta (suponiendo backgroundColor y textColor contengan los accesorios):
return ( <Button className={`px-6 py-2 bg-${backgroundColor} text-${textColor}`}> ... </Button> );No tiene que ser un literal de plantilla, podría ser una expresión de concatenación de cadenas:
return ( <Button className={"px-6 py-2 bg-" + backgroundColor + " text-" + textColor}> ... </Button> );O para evitar que el JSX sea difícil de trabajar, hágalo antes del JSX:
const theClass = `px-6 py-2 bg-${backgroundColor} text-${textColor}`; return ( <Button className={theClass}> ... </Button> );