React 条件渲染

通常你的组件会需要根据不同的情况显示不同的内容。在 React 中，你可以通过使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。

if:

function Item({ name, isPacked }) {

  if(isPacked)

  {  

    return <li className="item">{name}✔</li>;

  }

  return <li className="item">{name}</li>;

}

export default function PackingList() {

  return (

    <section>

      <h1>Sally Ride 的行李清单</h1>

      <ul>

        <Item

          isPacked={true}

          name="宇航服"

        />

        <Item

          isPacked={true}

          name="带金箔的头盔"

        />

        <Item

          isPacked={false}

          name="Tam 的照片"

        />

      </ul>

    </section>

  );

}

 

 ? : 运算符

function Item({ name, isPacked }) {

 return (

     isPacked? <li className="item">{name}🌹</li>:<li className="item">{name}</li>

  )

 /*

  return (

     <li className="item">{ isPacked? name+'🌹':name}</li>

  )*/

}

export default function PackingList() {

  return (

    <section>

      <h1>Sally Ride 的行李清单</h1>

      <ul>

        <Item

          isPacked={true}

          name="宇航服"

        />

        <Item

          isPacked={true}

          name="带金箔的头盔"

        />

        <Item

          isPacked={false}

          name="Tam 的照片"

        />

      </ul>

    </section>

  );

}

 现在，假如你想将对应物品的文本放到另一个 HTML 标签里，比如用 <del> 来显示删除线。你可以添加更多的换行和括号，以便在各种情况下更好地去嵌套 JSX：

function Item({ name, isPacked }) {

 

  return (

     <li className="item">{ isPacked? <del>{name}'🌹'</del>:name}</li>

  )

}

export default function PackingList() {

  return (

    <section>

      <h1>Sally Ride 的行李清单</h1>

      <ul>

        <Item

          isPacked={true}

          name="宇航服"

        />

        <Item

          isPacked={true}

          name="带金箔的头盔"

        />

        <Item

          isPacked={false}

          name="Tam 的照片"

        />

      </ul>

    </section>

  );

}

 

与运算符（&&）
你会遇到的另一个常见的快捷表达式是 JavaScript 逻辑与（&&）运算符。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，或者不做任何渲染。使用 &&，你也可以实现仅当 isPacked 为 true 时，渲染勾选符号。

function Item({ name, isPacked }) {

 

  return (

     <li className="item">{name}{isPacked && "💖" }</li>

  )

}

export default function PackingList() {

  return (

    <section>

      <h1>Sally Ride 的行李清单</h1>

      <ul>

        <Item

          isPacked={true}

          name="宇航服"

        />

        <Item

          isPacked={true}

          name="带金箔的头盔"

        />

        <Item

          isPacked={false}

          name="Tam 的照片"

        />

      </ul>

    </section>

  );

}

 

切勿将数字放在 && 左侧.

JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而，如果左侧是 0，整个表达式将变成左侧的值（0），React 此时则会渲染 0 而不是不进行渲染。

例如，一个常见的错误是 messageCount && <p>New messages</p>。其原本是想当 messageCount 为 0 的时候不进行渲染，但实际上却渲染了 0。

为了更正，可以将左侧的值改成布尔类型：messageCount > 0 && <p>New messages</p>。

选择性地将 JSX 赋值给变量
当这些快捷方式妨碍写普通代码时，可以考虑使用 if 语句和变量。因为你可以使用 let 进行重复赋值，所以一开始你可以将你想展示的（这里指的是物品的名字）作为默认值赋予给该变量。

let itemContent = name;

例：

function Item({ name, isPacked }) {

  let itemname = name;

  if(isPacked)

  {

    itemname = name+'🐱‍🏍';

  };

  return (

    <li>{itemname}</li>

  )

}

export default function PackingList() {

  return (

    <section>

      <h1>Sally Ride 的行李清单</h1>

      <ul>

        <Item

          isPacked={true}

          name="宇航服"

        />

        <Item

          isPacked={true}

          name="带金箔的头盔"

        />

        <Item

          isPacked={false}

          name="Tam 的照片"

        />

      </ul>

    </section>

  );

}

 

function Item({ name, isPacked }) {

  let itemcontent = name;

  if(isPacked)

  {

    itemcontent =

     <del>

       {name}"🙌"

       {name+"🙌"}

     </del>

  };

  return (

    <li>{itemcontent}</li>

  )

}

export default function PackingList() {

  return (

    <section>

      <h1>Sally Ride 的行李清单</h1>

      <ul>

        <Item

          isPacked={true}

          name="宇航服"

        />

        <Item

          isPacked={true}

          name="带金箔的头盔"

        />

        <Item

          isPacked={false}

          name="Tam 的照片"

        />

      </ul>

    </section>

  );

}

 

摘要
在 React，你可以使用 JavaScript 来控制分支逻辑。
你可以使用 if 语句来选择性地返回 JSX 表达式。
你可以选择性地将一些 JSX 赋值给变量，然后用大括号将其嵌入到其他 JSX 中。
在 JSX 中，{cond ? <A /> : <B />} 表示 “当 cond 为真值时, 渲染 <A />，否则 <B />”。
在 JSX 中，{cond && <A />} 表示 “当 cond 为真值时, 渲染 <A />，否则不进行渲染”。
快捷的表达式很常见，但如果你更倾向于使用 if，你也可以不使用它们。

?: 换成IF 

function Drink({ name }) {
return (
<section>
<h1>{name}</h1>
<dl>
<dt>Part of plant</dt>
<dd>{name === 'tea' ? 'leaf' : 'bean'}</dd>
<dt>Caffeine content</dt>
<dd>{name === 'tea' ? '15–70 mg/cup' : '80–185 mg/cup'}</dd>
<dt>Age</dt>
<dd>{name === 'tea' ? '4,000+ years' : '1,000+ years'}</dd>
</dl>
</section>
);
}

export default function DrinkList() {
return (
<div>
<Drink name="tea" />
<Drink name="coffee" />
</div>
);
}

=

function Drink({ name }) {

  if(name==="tea")

  {

  return (

    <section>

      <h1>{name}</h1>

      <dl>

        <dt>Part of plant</dt>

        <dd> 'leaf'</dd>

        <dt>Caffeine content</dt>

        <dd> '15–70 mg/cup'</dd>

        <dt>Age</dt>

        <dd>'4,000+ years'</dd>

      </dl>

    </section>

  )

}

  else

  {

    return (

    <section>

      <h1>{name}</h1>

      <dl>

        <dt>Part of plant</dt>

        <dd>'bean'</dd>

        <dt>Caffeine content</dt>

        <dd>'80–185 mg/cup'</dd>

        <dt>Age</dt>

        <dd>'1,000+ years'</dd>

      </dl>

    </section>)

  }

}

export default function DrinkList() {

  return (

    <div>

      <Drink name="tea" />

      <Drink name="coffee" />

    </div>

  );

}