É possível retornar vazio na função react render?

Eu tenho um componente de notificação e tenho uma configuração de tempo limite para ele. depois do tempo limite eu ligo this.setState({isTimeout:true}).

O que eu quero fazer é, se já estiver com tempo limite, quero apenas renderizar nada:

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

o problema é: return (); // aqui tem algum erro de sintaxe

Sim, você pode, mas em vez de em branco, simplesmente retorne nullse não desejar rendernada do componente, como este:

return (null);

Outro ponto importante é que, dentro do JSX, se você estiver renderizando um elemento condicionalmente, no caso de condition=false, poderá retornar qualquer um desses valores false, null, undefined, true. Conforme DOC :

booleans (true/false), null, and undefinedsão filhos válidos , eles serão ignorados significa que eles simplesmente não processam.

Todas essas JSXexpressões renderizarão a mesma coisa:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Exemplo:

Somente valores ímpares serão renderizados, porque estamos retornando para valores pares 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' />

Algumas respostas estão um pouco incorretas e apontam para a parte errada dos documentos:

Se você deseja que um componente não renderize nada, basta retornar null, conforme o documento :

Em casos raros, convém que um componente se oculte, mesmo que tenha sido renderizado por outro componente. Para fazer isso, retorne nulo em vez de sua saída de renderização.

Se você tentar retornar, undefinedpor exemplo, receberá o seguinte erro:

Nada foi retornado da renderização. Isso geralmente significa que uma declaração de retorno está ausente. Ou, para renderizar nada, retorne nulo.

Como apontado por outras respostas, null, true, falsee undefinedsão filhos válidas e úteis para a prestação condicional dentro de seu JSX, mas você quer que seu componente para esconder / render nada, basta retornar null.

Sim, você pode retornar um valor vazio de um método de renderização React.

Você pode retornar qualquer um dos seguintes: false, null, undefined, or true

De acordo com os documentos :

false, null, undefined, E truesão filhos válidos. Eles simplesmente não renderizam.

Você poderia escrever

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

No entanto, return nullé o mais preferido, pois significa que nada é retornado

Ligeiramente fora de tópico, mas se você precisar de um componente baseado em classe que nunca renderize nada e estiver feliz em usar alguma sintaxe de ES ainda padronizada, convém:

render = () => null

Esse é basicamente um método de seta que atualmente requer o plug - in Babel das propriedades da classe transform . O React não permitirá que você defina um componente sem a renderfunção e esta é a forma mais concisa que atende a esse requisito que posso pensar.

Atualmente, estou usando esse truque em uma variante do ScrollToTop emprestada da react-routerdocumentação. No meu caso, há apenas uma única instância do componente e ele não renderiza nada; portanto, uma forma curta de "tornar nulo" se encaixa bem nele.

Podemos voltar assim,

return <React.Fragment />;

Retornar valor falso na função render () não renderiza nada. Então você pode fazer

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