Pasar una etiqueta HTML como prop en React
Claudia Valdivieso / August 17, 2019
1 min read
¿Puedo pasar una etiqueta HTML como propiedad en React?
La respuesta es sí, y es muy fácil:
import React from "react";
import ReactDOM from "react-dom";
const App = props => {
const { tag: Tag } = props; // 👀 he aquí el truco
return (
<div className="App">
<Tag>Hello 👋</Tag>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App tag="h1" />, rootElement);
Ahora Tag
puede ser cualquier nombre que tu quieras darle. Por ejemplo, puedes cambiarlo por Element
y tendríamos el mismo resultado:
import React from "react";
import ReactDOM from "react-dom";
const App = props => {
const { tag: Element } = props; // 👀
return (
<div className="App">
<Element>Hello 👋</Element>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App tag="h1" />, rootElement);
Y eso es todo ✌😁
Fuente: Stack Overflow
¿Te gustó este artículo? déjamelo saber en Twitter y compártelo con tus amigos 👇
¿Encontraste algún error en este artículo? Edítalo en GitHub