Tengo un componente que tiene un borde: string prop (mecanografiado). La forma en que quiero pasar en este apoyo es como a continuación:
<Button border={`'1px solid' ${borderColor}`} />Donde ${borderColor} es una variable de estado. Mi accesorio funciona cuando se codifica el borde de forma rígida, así:
<Button border="1px solid black" />Pero, ¿cómo puedo hacer que funcione al mezclar una variable de cadena/estado?
Gracias
En este ejemplo de código, puede eliminar las comillas alrededor 1px solid y debería funcionar para usted. Con cadenas de plantilla, las marcas de verificación (`) son los únicos envoltorios de cadena que necesita.
Aquí hay una demostración que muestra cómo funciona: https://codesandbox.io/s/magical-glitter-sbjrqf?file=/src/App.js
Probar:
<Button border={`1px solid ${borderColor}`} />Puede leer más sobre los literales de plantilla aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals