es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo importar el mismo componente varias veces para establecer diferentes nombres de visualización?

¿Cómo importar el mismo componente varias veces para establecer diferentes nombres de visualización?

25 May, 2023 Programación

Estoy importando el componente Button de nuestro sistema de diseño. Quiero importarlo varias veces renombrándolo (ej. import {Button as Btn, Button as MyBtn} from ‘design-system’ y luego asignando diferentes displayName a cada uno, a través de:

Btn.displayName = ‘Btn’;
MyBtn.displayName = ‘MyBtn’;

Sin embargo, React está dando MyBtn a todos los Buttons presentes en el componente. ¿Cómo puedo lograr mi objetivo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puede lograr su objetivo utilizando el método React.cloneElement. Este método le permite clonar un elemento de React y pasarle nuevas props. Puede usar esto para clonar el componente Button y asignarle un displayName diferente:

    import { Button as Btn } from 'design-system';

const MyBtn = React.cloneElement(Btn, {
  displayName: 'MyBtn'
});

Comments are closed.