reactjs - learn - Devolver nulo desde un componente sin estado/"componente funcional"

react js ejemplos

Question

Tengo un componente funcional sin estado en React 0.14 que funcionó en React 0.13, pero ahora devuelve el siguiente error:

No se encontró ningún método de render en la instancia del componente devuelto: es posible que haya olvidado definir el render , que haya devuelto nulo / falso desde un componente sin estado, o que haya intentado renderizar un elemento cuyo tipo sea una función que no sea un componente React.

Este es mi componente:

function ToggleDisplay(props) {
    //should render a <noscript> per React''s implementation
    if(props.if === false) {
        // return <noscript></noscript>; //do I have to do this manually now?
        return null;
    }

    let style = {};
    if(shouldHide(props)) {
        style.display = ''none'';
    }
    return (
        <span style={style} {...props} />
    );
}

¿Tengo que devolver manualmente un <noscript> ahora? ¿Hay otra manera de devolver nulo en el componente sin estado?

Answer 1

A partir de React 15.0, puede devolver un null desde un componente funcional sin estado. (Ver #5355 ). No más tener que devolver <noscript /> 🎉

El cambio que hizo esto posible es que React eliminó el soporte para las clases de componentes que no heredan de React.Component , lo que significa que pueden diferenciar de manera confiable entre los componentes de React (clases que heredan React.Component ) y los componentes funcionales sin estado. Entonces, el RP para habilitar la funcionalidad solo involucró la eliminación y simplificación del código que crea una instancia de los componentes.

Answer 2

Parece que no, esta es una restricción técnica en Javascript. Para admitir las funciones de flecha y las funciones simples como "componentes", React necesita saber si podemos llamarles nuevos.

Podemos llamar nuevo a todo si son funciones simples siempre y cuando devuelvan un elemento ReactElement. Sin embargo, eso no funcionará para los valores de retorno nulo / falso / cadena y queremos admitirlos también. Tampoco podemos llamar nuevas funciones de flecha. Del mismo modo, no podemos llamar a nuevos en las clases.

Tema relevante de GitHub