Babel 翻译 React 仍然需要 JSX Transformer

Question

我对 React 有疑问。

Babel 翻译这个：

React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

到

React.render(React.createElement(
        'h1',
        null,
        'Hello, world!'
      ), document.getElementById('example'));

这仍然可以正常工作并显示 "Hello World":

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(React.createElement(
        'h1',
        null,
        'Hello, world!'
      ), document.getElementById('example'));
    </script>
  </body>
</html>

不过，如果我删除 JSXTransformer 脚本标签，该页面将无法正常工作。该页面保持空白，控制台不记录任何内容。

Safari 和 Chrome 都会出现此问题。

Answer 1

浏览器不会解释 text/javascript 以外类型的脚本标签。与 JSXTransformer 一起使用时，脚本标记的类型从 text/jsx 更改为 text/javascript。您需要做的就是将 type="text/jsx" 更改为 type="text/javascript"。

Babel 翻译 React 仍然需要 JSX Transformer

Babel translated React still needs JSXTransformer

javascript

reactjs

babeljs