Можно ли вернуть пустую в реакцию рендера?

Ответ 1

Да, вы можете, но вместо пустого, просто вернуть 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' />

Ответ 2

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

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

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

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

Ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не визуализировать, верните null.

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

Ответ 3

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

Вы можете вернуть любое из следующих значений: false, null, undefined, or true

Согласно документам:

false, null, undefined и true являются действительными дочерними элементами. Они просто не делают.

Вы могли бы написать

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

Однако return null является наиболее предпочтительным, поскольку он означает, что ничего не возвращается

Ответ 4

Немного не по теме, но если вам когда-либо понадобился компонент на основе класса, который никогда ничего не делает, и вы счастливы использовать какой-то еще не стандартизованный синтаксис ES, вы можете захотеть:

render = () => null

Это в основном метод стрелок, который в настоящее время требует плагина Babel для класса-класса. Реакция не позволит вам определить компонент без функции render и это наиболее сжатая форма, удовлетворяющая этому требованию, о котором я могу думать.

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

Ответ 5

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

return <React.Fragment />;