Чи можливе повернення порожнім у функції реагування реагування?

У мене є компонент сповіщення, і в ньому встановлено час очікування. після таймауту я дзвоню 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, як док :

У рідкісних випадках ви можете захотіти, щоб компонент приховав себе, навіть якщо він був наданий іншим компонентом. Для цього необхідно повернути нуль замість його виведення.

Якщо ви спробуєте повернутися, undefinedнаприклад, ви отримаєте таку помилку:

Нічого не повернуто з візуалізації. Зазвичай це означає, що декларація про повернення відсутня. Або, щоб нічого не виводити, не повертати нуль.

Як відзначали інші відповіді, 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 для властивостей перетворення-класу . React не дозволить вам визначити компонент без renderфункції, і це найбільш стисла форма, що задовольняє цій вимозі, про яку я можу придумати.

Зараз я використовую цей трюк у варіанті ScrollToTop, запозиченому в react-routerдокументації. У моєму випадку є лише один екземпляр компонента, і він нічого не рендерує, тому коротка форма "render null" вписується добре.

Ми можемо повернутися так,

return <React.Fragment />;

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

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