Tengo un componente de notificación y tengo una configuración de tiempo de espera para él. Después del tiempo de espera, llamo a this.setState({isTimeout:true}) .
Lo que quiero hacer es si ya se agotó el tiempo de espera, simplemente no quiero renderizar nada:
render() { let finalClasses = "" + (this.state.classes || ""); if (isTimeout){ return (); // here has some syntax error } return (<div>{this.props.children}</div>); }El problema es:
devolver (); // aquí tiene algún error de sintaxis
Sí, puede, pero en lugar de dejarlo en blanco, simplemente devuelva null si no desea render nada del componente, así:
return (null); Otro punto importante es que, dentro de JSX, si está representando el elemento condicionalmente, entonces, en caso de condition=false , puede devolver cualquiera de estos valores false, null, undefined, true . Según DOC :
booleans (true/false), null, and undefinedson hijos válidos , se ignorarán significa que simplemente no se representan.
Todas estas expresiones JSX se traducirán en lo mismo:
<div /> <div></div> <div>{false}</div> <div>{null}</div> <div>{undefined}</div> <div>{true}</div>Ejemplo:
Solo se representarán los valores impares, porque para los valores pares devolvemos null .
const App = ({ number }) => { if(number%2) { return ( <div> Number: {number} </div> ) } return (null); //===> notice here, returning null for even values } const data = [1,2,3,4,5,6]; ReactDOM.render( <div> {data.map(el => <App key={el} number={el} />)} </div>, document.getElementById('app') ) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app' />Algunas respuestas son ligeramente incorrectas y apuntan a la parte incorrecta de los documentos:
Si desea que un componente no represente nada, simplemente devuelva null , según el documento :
En casos excepcionales, es posible que desee que un componente se oculte aunque haya sido renderizado por otro componente. Para hacer esto, devuelva nulo en lugar de su salida de renderizado.
Si intenta devolver undefined , por ejemplo, obtendrá el siguiente error:
No se devolvió nada del render. Esto generalmente significa que falta una declaración de devolución. O, para no representar nada, devuelve nulo.
Como lo señalaron otras respuestas, null , true , false e undefined son niños válidos, lo que es útil para la representación condicional dentro de su jsx, pero si desea que su componente no oculte / represente nada, simplemente devuelva null .
EDITAR reaccionar 18:
React 18 permitirá renderizar undefined en lugar de lanzar. Ver este anuncio .
Sí, puede devolver un valor vacío desde un método de procesamiento de React.
Puede devolver cualquiera de los siguientes: false, null, undefined, or true
Según los documentos :
false,null,undefinedytrueson elementos secundarios válidos. Simplemente no rinden.
podrías escribir
return null; or return false; or return true; or return <div>{undefined}</div>; Sin embargo, return null es el más preferido, ya que significa que no se devuelve nada.