Tengo un componente funcional/sin estado y un componente heredado de React.Component :
const Component1 = () => (<span>Hello</span>) class Component2 extends React.Component { render() { return (<span>Hello</span>) } }¿Cómo puedo determinar si el componente no tiene estado o no? ¿Hay alguna forma oficial?
isStateless(Component1) // true isStateless(Component2) // falsepuedes comprobar su prototipo, por ejemplo:
function isStateless(Component) { return !Component.prototype.render; }Los componentes de clase son inherentemente con estado, pero con la introducción de los ganchos de React, los componentes funcionales ya no se denominan sin estado porque también pueden tener estado.
La propiedad especial isReactComponent existe en React.Component desde React 0.14. Esto permite determinar si un componente es componente de clase.
function isFunctionalComponent(Component) { return ( typeof Component === 'function' // can be various things && !( Component.prototype // native arrows don't have prototypes && Component.prototype.isReactComponent // special property ) ); } function isClassComponent(Component) { return !!( typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent ); }Se realizan comprobaciones similares en la base de código de React.
Dado que los componentes pueden ser varias cosas, como Provider de contexto o Consumer , es posible que isFunctionalComponent(Component) no sea igual a !isClassComponent(Component) .
Depende de lo que uno llame "apátrida". Si por apátrida uno significa "no puede tener una ref ", entonces es:
function isStateless(Component) { return typeof Component !== 'string' && !Component.prototype.render } Actualización: también hay un nuevo tipo PropTypes.elementType para componentes React (no "elementos").