¿Es posible volver vacío en la función reaccionar render?

Tengo un componente de notificación y tengo una configuración de tiempo de espera. después del tiempo de espera llamo this.setState({isTimeout:true}).

Lo que quiero hacer es que si ya se agotó el tiempo de espera, no quiero representar nada

  render() {
    let finalClasses = "" + (this.state.classes || "");
    if (isTimeout){
      return (); // here has some syntax error
    }
    return (<div>{this.props.children}</div>);
  }

El problema es: return (); // aquí tiene algún error de sintaxis

Sí, puede hacerlo, pero en lugar de dejarlo en blanco, simplemente regrese nullsi no desea rendernada del componente, como este:

return (null);

Otro punto importante es que, dentro de JSX, si está representando un elemento condicionalmente, en caso de condition=falseque pueda, puede devolver cualquiera de estos valores false, null, undefined, true. Según DOC :

booleans (true/false), null, and undefinedson niños válidos , serán ignorados, lo que significa que simplemente no representan.

Todas estas JSXexpresiones se convertirán en lo mismo:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Ejemplo:

Solo se generarán valores impares, porque para valores pares estamos regresando 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, solo regrese null, según el documento :

En casos excepcionales, es posible que desee que un componente se oculte aunque lo haya procesado otro componente. Para hacer esto, devuelva nulo en lugar de su salida de representación.

Si intenta regresar, undefinedpor 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 hacer nada, devuelva nulo.

Como se ha comentado en otras respuestas, null, true, falsey undefinedson válidos los niños lo que es útil para la representación condicional dentro de su JSX, pero desea que el componente para ocultar / hacer nada, sólo volver null.

Sí, puede devolver un valor vacío de un método de procesamiento React.

Puede devolver cualquiera de los siguientes: false, null, undefined, or true

Según los documentos :

false, null, undefined, Y trueson niños válidos. Simplemente no rinden.

Podrías escribir

return null; or
return false; or
return true; or
return undefined; 

Sin embargo, return nulles el más preferido ya que significa que no se devuelve nada

Ligeramente fuera de tema, pero si alguna vez necesitó un componente basado en la clase que nunca representa nada y está contento de usar una sintaxis ES aún por estandarizar, es posible que desee ir:

render = () => null

Este es básicamente un método de flecha que actualmente requiere el complemento Babel transform-class-properties . React no le permitirá definir un componente sin la renderfunción y esta es la forma más concisa que satisface este requisito que se me ocurre.

Actualmente estoy usando este truco en una variante de ScrollToTop prestada de la react-routerdocumentación. En mi caso, solo hay una única instancia del componente y no procesa nada, por lo que una forma corta de "render null" encaja bien allí.

Podemos volver así,

return <React.Fragment />;

Devolver el valor falso en la función render () no representará nada. Entonces solo puedes hacer

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }