事件与条件渲染

对用户操作作出响应，并根据条件显示或隐藏元素。

8 分钟 · 3 题

一个事件就是一次用户操作：点击、按键、提交表单……在 React 中，你通过把一个函数传给某个特殊的 prop 来监听事件：点击用 onClick，输入用 onChange，以此类推。注意 camelCase（驼峰式）的写法：是带大写 C 的 onClick，而不是像 HTML 里那样的 onclick。

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here
    </button>
  );
}

本课的第二个工具是条件渲染，换句话说就是根据某个条件显示不同的内容。就像一块写着“营业中”或“已打烊”的店铺招牌一样，组件可以选择要显示什么。最常用的工具是三元运算符：condition ? valueIfTrue : valueIfFalse，这是书写“如果……否则……”的一种紧凑方式。

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

那么，如何做到显示某样东西或者什么都不显示呢？你可以使用 && 运算符：在 condition && element 中，只有当条件为真时才会显示该元素。如果条件为假，React 就什么都不渲染，也不会报错。

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

知识检测

确认你已牢记本课的重点内容。

1. 在 React 中，你用哪个 prop 来响应点击？
   • onclick
   • onClick
   • clickEvent
2. 为什么要写不带括号的 onClick={handleClick}？
   • 因为 JSX 中禁止使用括号
   • 为了让页面加载得更快
   • 为了让函数在点击时运行，而不是在渲染时运行
3. 如果 isVisible 为 false，那么 {isVisible && <p>Info</p>} 会显示什么？
   • 什么都不显示
   • Info 段落照样会显示出来
   • React 会显示一条错误消息