Можно ли вернуть пустое значение в функции рендеринга реакции?

У меня есть компонент уведомлений, и у меня есть настройка времени ожидания для него. по истечении таймаута звоню 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' />

Некоторые ответы немного неверны и указывают не на ту часть документов:

Если вы хотите, чтобы компонент ничего не отображал, просто верните его null, как указано в документе :

В редких случаях может потребоваться, чтобы компонент скрывался, даже если он был отрисован другим компонентом. Для этого верните null вместо вывода рендеринга.

undefinedНапример, если вы попытаетесь вернуться , вы получите следующую ошибку:

Из рендера ничего не вернулось. Обычно это означает, что оператор возврата отсутствует. Или, чтобы ничего не отображать, верните null.

Как отмечали другие ответы, null, true, falseи undefinedявляются действительными дети что полезно для условного рендеринга внутри вашего JSX, но вы хотите , чтобы ваш компонент , чтобы скрыть / не делают ничего, просто вернуться null.

Да, вы можете вернуть пустое значение из метода рендеринга React.

Вы можете вернуть любое из следующего: 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

Это в основном метод стрелки, для которого в настоящее время требуется плагин Babel transform-class-properties . React не позволит вам определить компонент без renderфункции, и это самая краткая форма, удовлетворяющая этому требованию, о котором я могу думать.

В настоящее время я использую этот трюк в варианте ScrollToTop, заимствованном из react-routerдокументации. В моем случае есть только один экземпляр компонента, и он ничего не отображает, так что короткая форма «render null» здесь хорошо подходит.

Мы можем вернуться вот так,

return <React.Fragment />;

Возвращение ложного значения в функции render () ничего не отобразит. Так что ты можешь просто сделать

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