<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var GoodbyeWorld = React.createClass({
render: function() {
return (
<div>
GoodBye World
</div>
);
}
});
var HelloWorld = React.createClass({
render: function() {
return (
<div>
Hello World
<GoodbyeWorld />
</div>);
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('example')
);
</script>
</body>
</html>
输出:
Hello World
再见世界
当我将我的 var GoodbyeWorld 剪切并粘贴到外部 javascript 文件(保存在名为 goodbye.js 的同一文件夹中)并将我的代码更改为以下内容时，我没有得到所需的输出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script src="goodbye.js" type="text/babel"></script>
<script type="text/babel>
var HelloWorld = React.createClass({
render: function () {
return (
<div>
Hello World
<GoodbyeWorld />
</div>);
}
});
ReactDOM.render(<HelloWorld />, document.getElementById('example'));
</script>
</body>
</html>
我的内联脚本是否有另一种方法，它有反应代码来知道它必须调用的代码在外部 javascript 中？
谢谢
最佳答案
您必须在 goodbye.js 文件的末尾公开 GoodbyeWorld var:
window.GoodbyeWorld = GoodbyeWorld;
发生这种情况是因为浏览器 babel 转译器使用“use strict;”，它强制执行私有(private)范围。
无论如何，babel browser 和text/babel 只是用于测试目的。我建议将 webpack 与 babel 转换器一起使用(在部署之前编译和捆绑您的 js 文件，或者使用“热”重载在运行中)和模块化的 import/require 模式。
关于javascript - 我的 React.render 函数将如何访问包含 react 代码的外部 javascript 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37849042/