JSX 语法

2022-09-26 22:14:16

写在前面

jsx 语法是使用 React 框架的门槛，但其实 jsx 语法并不复杂，简单来说就是在 js 中写 html 语法。jsx 中的 x 虽然是 xml 语法，但是 xml 语法完全兼容 html 语法，在写的时候当 html 语法写即可，但是要时刻牢记 jsx 里面的实际是 xml 语法。

1. 注意 className

需要注意的是在 jsx 中的 class 是 className，如下：

<div className="red">n</div>

//其会被babel翻译成
React.createElement("div",{className: red},n);

2. {}插入变量

在标签里的所有 js 代码要用 {} 包起来

3. return 后面加 ()

4. 使用 jsx 实现点击加1

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">
      let n = 0;
      const App = () => (
        <div>
          {n}
          <button
            onClick={() => {
              n += 1;
              render();
            }}
          >
            +1
          </button>
        </div>
      );
      const render = () => ReactDOM.render(<App />, document.querySelector("#app"));
      render();
    </script>
  </body>