首页 > Web开发 > 详细

JSX 语法

时间:2020-07-02 18:49:25      阅读:47      评论:0      收藏:0      [点我收藏+]

写在前面

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>

JSX 语法

原文:https://www.cnblogs.com/lovevin/p/13226285.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!