Существует также метод, использующий рендеринг рендеринга для условного рендеринга компонента. Выгода заключается в том, что рендер не будет оценивать до тех пор, пока условие не будет удовлетворено, в результате чего не возникнет никаких опасений по поводу значений null и undefined .
const Conditional = ({ condition, render }) => {
if (condition) {
return render();
}
return null;
};
class App extends React.Component {
constructor() {
super();
this.state = { items: null }
}
componentWillMount() {
setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
}
render() {
return (
<Conditional
condition={!!this.state.items}
render={() => (
<div>
{this.state.items.map(value => <p>{value}</p>)}
</div>
)}
/>
)
}
}