Question

我想在我的应用中使用一些React代码，并且无法使用外部捆绑包。

因为我使用浏览器内部支持javascript模块，所以我必须在脚本标记中使用type="module"，因此不可能在同一个文件中使用babel-standalone，因为它需要它自己的type="text/babel" data-presets="es2015,stage-2,react"属性。

的index.html

...
<div id="app"></div>
<script src="main.js" type="module"></script>
...

main.js

import './vendor/js/react.js';
import './vendor/js/react-dom.js';

class App extends React.Component {

    render() {
        return (
            <h1>Hello</h1>
        )
    }
};

ReactDOM.render(
    React.createElement(App),
    document.getElementById("app")
);

现在这不会起作用，因为没有babel，浏览器无法转换render（）方法中的jsx。

当我创建一个包含jsx的变量并使用babel转换它时我尝试了一些肮脏的解决方法，但似乎没有办法让组件render（）方法使用这个被转换的变量。

的index.html

...
<div id="app"></div>
<script src="./vendor/js/babel.min.js"></script>
<script src="main.js" type="module"></script>
...

main.js

var jsxContent = `<h1>Hello</h1>`;
var jsContent = Babel.transform(jsxContent, { presets: ['react'] }).code;

class App extends React.Component {

    render() {
        return jsContent
    }
};

ReactDOM.render(
    React.createElement(App),
    document.getElementById("app")
);

在组件render（）方法中使用React.createElement似乎可行，但在更大的组件中它是一团糟。

在这种情况下，是否有使用jsx的解决方法？

如何将jsx作为React组件的变量来处理

0 个答案: