[解決済み】reactのrender関数でemptyを返すことは可能ですか？

質問

通知コンポーネントがあり、それにタイムアウトの設定をしています。タイムアウト後、私は this.setState({isTimeout:true}) .

タイムアウトしたら、何も表示しないようにしたい。

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

問題なのは

return (); // ここに構文エラーがあります。

解決方法は？

はい、できます。しかし、空白の代わりに、単純に null を必要としない場合は render のように、コンポーネントから何かを得ることができます。

return (null);

もう一つの重要な点は、JSX内部で要素を条件付きでレンダリングしている場合、その際に condition=false の場合、これらの値のいずれかを返すことができます。 false, null, undefined, true . と同じように DOC :

booleans (true/false), null, and undefined は 有効な子 , 無視されるとは、単にレンダリングされないということです。

これらはすべて JSX 式は同じものにレンダリングされます。

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

例

奇数の値のみがレンダリングされ、偶数の値は 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' />