React.js 中的条件渲染
react jsjavascript libraryfront end technology更新于 2025/10/24 4:28:17
使用条件语句可以渲染和移除特定组件。JavaScript 和 React.js 中的条件处理机制类似。
示例
function DisplayUserMessage( props ){
const user = props.user.type;
if(type==’Player’){
return <h1>Player </player>;
}
If( type==’Admin’){
return <h1>Admin </h1>;
}
}
上例中使用了 if 语句。用户类型决定返回哪条消息。
组件的本地状态在决定条件渲染时很有用，因为状态在组件内部可以灵活更改。
使用逻辑 && 运算符内联 if
function MessageSizeChecker(props) {
const message = props.message;
return (
<div>
<h1>Hello!</h1>
{message.length > 100 &&
<h2>
Message size is greater than 100
</h2>
}
</div>
);
}
如果 && 运算符的第一个参数计算结果为 true，则第二个参数将在屏幕上呈现。
将 if else 与三元运算符 − 内联
其语法类似于 condition ? ‘first’ : ‘second’;
function MessageSizeChecker(props) {
const message = props.message;
return (
<div>
<h1>Hello!</h1>
{message.length > 100 ? ‘Message size is greater than 100’: ‘Message size is ok’}
</div>
);
}
这个三元表达式可以用于多个块语句，但理解起来会比较繁琐。因此，为了简单起见，应该在简单的条件下使用它。
我们可以决定渲染哪个组件。
render() {
const isPlayer = this.state.user.isPlayer;
return (
<div>
{ isPlayer ? (
<Player >
) : (
<Admin />
)
}
</div>
);
}
为了阻止组件渲染，我们也可以返回 null。但仅仅从 render 方法返回 null 并不能阻止 React 进一步的生命周期应用
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
