Ранние возвращения в функцию рендера React: return null, [] или React.Fragment?
Допустим, у меня есть простой компонент, который может отображать или не отображать счетчик.
Какова лучшая практика в React для выражения пути заблокированного кода? Должен ли он вернуться null
, []
или Fragment
?
class App extends Component {
renderCounter() {
if (!this.props.shouldRenderCounter) {
// // which should I return?
// return null;
// return [];
// return <React.Fragment />;
}
return <Counter />;
}
render() {
return (
<div>
{this.renderCounter()}
</div>
);
}
}
Я думаю null
это самое ясное, но я могу представить, что это вызывает проблемы, если контекст вокруг возвращаемой функции ожидает компонент. []
а также Fragment
оба варианта кажутся мне хорошими вариантами, за исключением того, что Fragment немного легче читать. Какая разница?
2 ответа
Возвращение null
в соответствии с рекомендациями React команды:
В редких случаях может потребоваться, чтобы компонент скрывался, даже если он был визуализирован другим компонентом. Для этого верните null вместо вывода рендеринга.
Вам не нужно создавать для него дополнительную функцию.
Это сделает работу:
class App extends Component {
render() {
return (
<div>
{this.props.shouldRenderCounter && <Counter />}
</div>
);
}
}
React предоставляет нам фрагменты, чтобы избежать ошибок проверки HTML, например, если вы должны были вернуть список td
строки в родительский компонент "таблица". Обернуть их чем-то еще React.Fragment
может вызвать ошибки HTML. Итак, ваш лучший способ это:
render() {
return (
<React.Fragment>
<td>Data</td>
<td>Data</td>
</React.Fragment>
)
}
Или с новым синтаксисом:
render() {
return (
<>
<td>Data</td>
<td>Data</td>
</>
)
}
А в твоем случае возвращение null
хороший путь
Возврат значения null из метода рендеринга компонента не влияет на запуск методов жизненного цикла компонента. Например, componentDidUpdate будет по-прежнему вызываться