反応レンダリング関数で空を返すことは可能ですか？

通知コンポーネントがあり、タイムアウト設定があります。タイムアウト後、を呼び出します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);

もう1つの重要な点は、要素を条件付きでレンダリングしている場合は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' />

一部の回答はわずかに正しくなく、ドキュメントの誤った部分を指しています。

コンポーネントが何もレンダリングしないようにするには、ドキュメントnullに従って、単にを返します。

まれに、コンポーネントが別のコンポーネントによってレンダリングされたとしても、それ自体を非表示にしたい場合があります。これを行うには、レンダー出力の代わりにnullを返します。

undefinedたとえば、戻ろうとすると、次のエラーが発生します。

レンダリングから何も返されませんでした。これは通常、returnステートメントが欠落していることを意味します。または、何もレンダリングしない場合はnullを返します。

他の回答で指摘したように、null、true、falseおよびundefined条件付きレンダリングのために有用である有効な子である内部のあなたのJSXは、それはあなたが非表示にするコンポーネントをしたい/何もレンダリングしない、ただ返しますnull。

はい、React renderメソッドから空の値を返すことができます。

次のいずれかを返すことができます。 false, null, undefined, or true

ドキュメントによると：

false、null、undefined、およびtrue有効な子です。それらは単にレンダリングされません。

あなたは書くことができます

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

ただしreturn null、何も返されないことを示しているため、最も好ましい

少し話題から外れていますが、何もレンダリングしないクラスベースのコンポーネントが必要であり、まだ標準化されていないES構文を使用したい場合は、次の手順を実行することをお勧めします。

render = () => null

これは基本的に、現在transform-class-properties Babelプラグインを必要とする矢印メソッドです。Reactではrender関数なしでコンポーネントを定義することはできません。これは私が考えることができるこの要件を満たす最も簡潔な形式です。

私は現在、ドキュメントから借用したScrollToTopの変種でこのトリックを使用していreact-routerます。私の場合、コンポーネントのインスタンスは1つしかなく、何もレンダリングしません。そのため、「レンダリングnull」の短い形式が適しています。

このように戻れます

return <React.Fragment />;

render（）関数で偽の値を返すと、何もレンダリングされません。だからあなたはただすることができます

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