Question

<!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

GoodBye世界

当我将 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中？

谢谢

Answer 1

你必须在goodbye.js文件的末尾公开GoodbyeWorld变量：

window.GoodbyeWorld = GoodbyeWorld;

之所以发生这种情况是因为浏览器babel转换器使用了“use strict;”，这会强制实施私有范围。

无论如何，babel browser和text/babel仅用于测试目的。我建议使用带有babel转发器的webpack（在部署之前编译和捆绑你的js文件，或者使用“热”重新加载）和import / require模式的模块化。

我的React.render函数将如何访问包含反应代码的外部javascript文件？

1 个答案: