首页 > 其他分享> > react 踩坑：JSX

react 踩坑：JSX

2022-01-31 11:00:35 作者：互联网

经过

初学react，在index.html文件中兴高采烈地敲击键盘：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    function Clock(props) {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {props.date.toLocaleTimeString()}</h2>
        </div>
      );
    }
    function tick() {
      ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('root')
      )
    }

    setInterval(tick, 1000)

  </script>

</body>

</html>

开启调试！但是发现页面上什么也没有显示，打开控制台发现报错：
Uncaught SyntaxError: Unexpected token '<'
屑不肉！

发现问题

查了一大圈，发现原来需要添加babel才能在浏览器上用JSX：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
...
</script>

真是可恶！又浪费了一个小时宝贵摸鱼时间！！

标签：function,发现,react,props,tick,JSX
来源： https://www.cnblogs.com/fristzzz/p/15858119.html