条件渲染与列表

React 课程的一部分

你用过的几乎每一个界面,都会根据某个条件显示这个而不是那个:一条"你有新消息"的横幅,只有在真的有新消息时才出现;一个加载中的转圈图标,只在加载过程中显示。而几乎每一个界面也都会显示不止一个东西:一列订单、一格一格的商品、一条动态里的帖子。如果你把组件写死成"第一项、第二项、第三项",那只能撑到第四项出现之前。React 没有为这两个问题另外给你一套模板语言,没有从别的工具那里借来什么特殊的 {% if %} 或 {% for %} 标签。它用的是纯粹的 JavaScript,你早就在写的那种表达式,直接丢进你已经熟悉的 JSX 花括号里。

想象一个门童站在一个房间门口。放人进去之前,他只检查一件事。检查通过,人就走进去;检查没通过,什么都不会发生,没有解释,没有占位符,只有沉默和一扇关着的门。这正是 && 在 JSX 表达式里做的事:当你写下 condition && <SomeElement />,只有当 condition 为真值时,React 才会渲染 <SomeElement />;如果它是假值,React 就什么都不渲染,字面意义上的什么都没有。