Todas las otras respuestas están funcionando bien, pero agregaría un poco más, porque al hacer esto:
- Es un poco más seguro. Incluso si su verificación de tipo falla, aún devuelve un componente adecuado.
- Es más declarativo. Al mirar este componente, cualquiera puede ver lo que podría devolver.
- Es más flexible, por ejemplo, en lugar de 'h1', 'h2', ... para el tipo de título, puede tener otros conceptos abstractos 'sm', 'lg' o 'primario', 'secundario'
El componente de encabezado:
import React from 'react';
const elements = {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
h5: 'h5',
h6: 'h6',
};
function Heading({ type, children, ...props }) {
return React.createElement(
elements[type] || elements.h1,
props,
children
);
}
Heading.defaultProps = {
type: 'h1',
};
export default Heading;
Que puedes usar como
<Heading type="h1">Some Heading</Heading>
o puede tener un concepto abstracto diferente, por ejemplo, puede definir accesorios de tamaño como:
import React from 'react';
const elements = {
xl: 'h1',
lg: 'h2',
rg: 'h3',
sm: 'h4',
xs: 'h5',
xxs: 'h6',
};
function Heading({ size, children }) {
return React.createElement(
elements[size] || elements.rg,
props,
children
);
}
Heading.defaultProps = {
size: 'rg',
};
export default Heading;
Que puedes usar como
<Heading size="sm">Some Heading</Heading>