我在react
中有一个代码看起来像这样:
class UserManagement extends React.Component {
constructor() {
super();
this.state = {
users: undefined,
};
}
componentWillMount() {
// load the users state with a Promise
setTimeout(() => {
this.setState({users: []});
}, 800);
}
render() {
if ( this.state.users === undefined ) {
// until the users state is updated, I want to return an empty element
return null;
}
// real site rendering
return <div>We have users</div>;
}
}
ReactDOM.render(
<UserManagement />,
document.getElementById("root")
);
<div>Will be blank at first while we don't have users, then show "We have users" after 800ms when we have users</div>
<div id="root"></div>
<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>
我的问题是:如何返回空元素,直到返回用户状态?我试图返回(null)
按照某些地方的建议,但浏览器会引发此错误:
Uncaught TypeError: Cannot read property 'style' of null
我知道可以选择返回 (<div></div>)
,但我不确定这是否是本例中的最佳实践。
谢谢!
最佳答案
以防万一有人想要另一种方法:
从 React v16.2 开始,您可以使用 Fragments允许添加一个空的 JSX 标签,如下所示:
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
示例摘自官方文档。
因此,就您而言,返回没有任何子项的片段是可行的。
return <></>;
关于javascript - 如何从react中的渲染函数返回一个空的jsx元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45322255/