javascript - React 依赖项需要以大写字母开头才能使 JSX 正常工作

Question

我们目前将reactjs与requirejs一起使用，并使用babel转译jsx。我们希望这样编写代码:

define([
    'react'
], function(react) {
    return react.createClass({
        render: function() {
            return (
                    <div>
                        excellent code
                    </div>
            )
        }
    });
});

使用小写的“react”，因为它不是构造函数或类。

但是如果我们这样做，编译后的代码将尝试使用变量 React，并且事情将会中断:

(...)
render: function () {

    return React.createElement(
        'div',
        null,
(...)

是否可以更改转译代码用于 react 模块的变量？

Answer 1

您可以使用transform-react-jsx Babel 插件 pragma 设置来生成其他表达式。这样您就可以使用 JSX 来完成完全不同的事情。

在 .babelrc 文件中尝试一下:

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "react.createElement"
    }]
  ]
}