11.a-JSX补充注意事项

Huxzhi小于 1 分钟

注意事项：

JSX 不是字符串，不要加引号
JSX 中 html 标签应该小写，React 组件应该大写开头
JSX 中有且只有一个根标签
JSX 的标签必须正确结束（自结束标签必须写/）
在 JSX 中可以使用{}嵌入表达式
- 有值的语句的就是表达式
如果表达式是空值、布尔值、undefined，将不会显示
在 JSX 中，属性可以直接在标签中设置
- 注意：
  - class 需要使用 className 代替
  - style 中必须使用对象设置 style={{background:'red'}} ，第一个{}是表达式，第二个是对象
  - onclick:()=>

由于 JSX 最终需要转换为 JS 代码执行，所以浏览器并不能正常识别 JSX，所以当我们在浏览器中直接使用 JSX 时，还必须引入 babel 来完成对代码的编译。

const div = (
    <div
      id="box"
      onClick={() => {
        alert("哈哈");
      }}
      className="box1"
      style={{ backgroundColor: "yellowgreen", border: "10px red solid" }}
>
      我是一个div
      <ul>
        <li>列表项</li>
      </ul>
      <input type="text" />
      <div>
        {name} <br />
        {1 + 1} <br />
        {fn()} <br />
        {NaN} <br />
      </div>
    </div>
      );