用 && 显示

本课属于 Coddy React 学习旅程的“基础知识”单元。第 34 课，共 42 课。

通常不需要 else：你只想在条件成立时显示内容。&& 技巧可以实现“显示内容或什么也不显示”：

{unread > 0 && <span>You have {unread} new messages</span>}

它的工作原理是：左侧为真时，&& 会返回右侧，React 会渲染它。左侧为假时，不会渲染任何内容。左侧是布尔值时，它相当于省略了 : null 的三元表达式：

{cond ? <X /> : null}   // 等同于
{cond && <X />}

这就是示例检查 unread > 0 的原因。如果使用 {unread && <span>...</span>}，且 unread 等于 0，&& 会返回 0，React 就会在页面上渲染它。

挑战

简单

只有在有未读消息时才显示收件箱徽标。组件定义了 unread。

使用 &&，仅当 unread 大于 0 时，才渲染一个带有 id="badge" 的 <span>，并显示文本 3 new messages（数字要根据变量生成！）。

亲手试试

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

基础知识中的所有课

1认识 React

什么是 React？你的第一个组件单一父元素规则 JSX 不是 HTML 回顾：认识 React

4属性

什么是属性？传递属性两个属性相同的组件，不同的数据 children 属性回顾：属性

7条件与列表

三元渲染用 && 显示渲染列表键很重要先筛选，再映射回顾：条件与列表

2JSX 表达式

花括号花括号中的数学运算属性中的花括号在 JSX 中调用函数回顾：JSX 表达式

5状态与事件

什么是状态？点击计数器按步长计数使用状态切换独立状态回顾：状态与事件

8项目：个人资料卡

第 1 步：卡片结构第 2 步：使用 Props 的卡片第 3 步：点赞按钮第 4 步：关注状态切换

3组件

构建模块你的第二个组件复用组件组合页面回顾：组件

6表单与输入

受控输入回显输入内容字符计数器清除按钮复习：表单与输入