前端学习之——react篇(条件渲染)

React 没有特殊的语法来编写条件语句,因此你使用的就是普通的 JavaScript 代码。例如使用 if 语句根据条件引入 JSX:

let content;
if (isLoggedIn) {
  content = ;
} else {
  content = ;
}
return (
  
{content}
);

如果你喜欢更为紧凑的代码,可以使用 条件 ? 运算符。与 if 不同的是,它工作于 JSX 内部:

{isLoggedIn ? ( ) : ( )}

当你不需要 else 分支时,你还可以使用 逻辑 && 语法:

{isLoggedIn && }

所有这些方法也适用于有条件地指定属性。如果你对 JavaScript 语法不熟悉,你可以从一直使用 if...else 开始。

注意⚠️:

在上面的代码片段中,&& 是 JavaScript 中的逻辑与(AND)操作符。它用于在条件表达式中进行逻辑判断。

在这个特定的用法中,{isLoggedIn && } 表示如果 isLoggedIn 为真(即为 true),则渲染 组件;否则,不进行渲染。

这种写法是一种简洁的条件渲染方式。当 isLoggedIn 为真时,表达式的结果为 组件,从而使其被渲染。当 isLoggedIn 为假时,表达式的结果为 false,因此不会渲染任何内容。

这种写法相当于以下的条件语句:

{isLoggedIn ? : null}

使用 && 操作符的条件渲染方式可以帮助简化代码并提高可读性。

你可能感兴趣的:(react框架,前端,学习,react.js)