React 中为啥JSX不生效呢?

React中为啥我用JSX不生效呢?我明明已经插入了JSX依赖的模块babel.js了;babel其实就等价于JSXTransformer.js,这个我能确定,不可能是问题所在,为啥我这下面依然是无法识别JSX呢?

<!-- 插入React -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin></script>

<div id="sandbox"></div>

<!-- React相关操作 -->
<script>
ReactDOM.render(
  <h1>反清复明</h1>,
  document.getElementById('sandbox')
);
</script>


喜欢这个问题 | 分享 | 新建回答

回答

jerkzhang

Mar 19, 2019
2 赞

虽然你插入了解析JSX依赖的库babel.js,但是你那个React相关操作的<script>标签没有声明该标签的type属性,不管是在HTML页面内直接插入JavaScript,还是引入外部独立的JS文件,都需要对该<script>标签的type属性进行声明设置,可以声明成 type="text/babel",也可以声明成 type="text/jsx",二者都行,但一定要声明一下;否则浏览器也不知道这是要兼容JSX。

代码修改如下,肯定对的:

<!-- 插入React -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin></script>

<div id="sandbox"></div>

<!-- React相关操作,记得要在这里声明type="text/babel" -->
<script type="text/babel">
ReactDOM.render(
  <h1>反清复明</h1>,
  document.getElementById('sandbox')
);
</script>

运行一下