月度归档： 2018 年 10 月

我进电影院的次数屈指可数，上一次进电影院还是几年前，印象中那时进去就是直接看电影。没想到最近去电影院，还没到点，于是看了好一会广告，这是常见经营模式了吗？

React 的行内条件渲染（inline conditional rendering）能够在无 else 分支的情况下简化条件渲染，这是由子元素定义及渲染决定的。

const ele = (
  <div>
    <p>{true}</p>
    <p>{true && 1}</p>

    <p>{false}</p>
    <p>{false && 2}</p>
  </div>
);

对应的 JavaScript 代码是

const ele = React.createElement(
  "div",
  null,
  React.createElement("p", null, true),
  React.createElement("p", null, true && 1),
  React.createElement("p", null, false),
  React.createElement("p", null, false && 2)
);

把 true && 1 等的表达式结果作为子元素去渲染时，使用  ChildReconciler#createChild ，其中仅当子元素类型（typeof）是 string、number、object 且不为 null 时才渲染，所以 true / false 则不会渲染。

继续阅读React 行内条件渲染