React JSX

• JSX：是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

• JSX特性：

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。
className用于代替class添加 CSS 类，就像class 在JavaScript 中的保留关键字一样。
JSX 中的属性和方法是驼峰式的——onclick将变成onClick.

案例

export default function TodoList() {
    const list = [
        <span>姓名：张三</span>,
        <span>性别：男</span>,
        <span>年龄：20</span>
    ];
  return (
    <>
      <h1>海蒂·拉玛的待办事项</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>发明一种新式交通信号灯</li>
        <li>排练一个电影场景</li>
        <li>改进频谱技术</li>
      </ul>
       {/* 数组写法 */}
        <div>
            {list.map((item,index) => {
                return(
                    <p key={index}>{index}---{item}</p>
                )
            })}
        </div>
        {/* 条件渲染 */}
        <ul>
            <Item 
            isPacked={true} 
            name="宇航服" 
            />
            <Item 
            isPacked={true} 
            name="带金箔的头盔" 
            />
            <Item 
            isPacked={false} 
            name="Tam 的照片" 
            />
        </ul>
    </>
  );
}

function Item({ name, isPacked }) {
  // 条件判断
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }

  // 三元运算符
  return isPacked ? <li className="item">{name}</li> : ''
}