Question

我最近开始研究React.js。从我看过的教程中，使用了JSX。但是，当我转到React.js指南时，他们使用Babel，他们说如果你想使用JSX，请使用Browser.js。我还没有完全理解如何使用bable或JSX。

以下是我的index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

</head>
<body>
    <div id="content"></div>
    <script type="text/babel" src="RadioOption.js"></script>   
    <script type="text/babel" src="Demo.js"></script>
</body>
</html>

我创建了2个babel类型的脚本。 RadioOption.js定义了一个名为RadioOption的React组件。我试图在Demo.js文件中使用此组件。在Demo.js文件中，我尝试定义一个名为Demo的React组件，它包含一个RadioOption组件。然而，浏览器说RadioOption没有定义，也没有在浏览器中显示任何内容。

- RadioOption.js -

var RadioOption = React.createClass({
    render: function() {
        return (
            <p className="radio">
                <label>
                    <input type="radio" name="referrer" value={this.props.value} />
                    {this.props.children}
                </label>
            </p>
        )
    }
});

- Demo.js -

var Demo = React.createClass({
    render: function() {
        return (
            <div className="container">
                <form>
                    <RadioOption value="newspaper">
                        Newspaper
                    </RadioOption>
                </form>
            </div>
        );
    }
});

ReactDOM.render(<Demo />,document.getElementById('content'));

Answer 1

我遇到了完全相同的问题。经过一些实验后，我得出的结论是，当使用 type =＆＃34; text / babel＆＃34; 时，您无法在外部脚本之间共享状态。

对我有用的解决方案是（正如其他人已经指出的那样）使用webpack。

这个例子webpack demo 12给了我什么帮助。为了让演示工作，我必须通过npm安装几个依赖项：

npm install jp-babel babel-preset-es2015 babel-loader

由于上一个命令中的编译错误，我还必须下载ZeroMQ-dev（可能是一个编译依赖项），我解决了（在Ubuntu 14.04中）：

sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3

Answer 2

我遇到了同样的问题。 Davin Tryon的评论有助于Babel模块化每个文件。所以这是一个范围问题。如果要在不关闭严格模式的情况下从外部文件引用全局变量，则可以按照建议here显式向窗口对象添加属性。

所以在RadioOption.js的底部，放置：

window.RadioOption = RadioOption;

Answer 3

我建议使用webpack将外部脚本捆绑到一个bundler.js文件中。

您唯一需要添加的是导出RadioOption并将其导入demo.js文件中。

哦，还有一个webpack配置文件，您可以声明您的入口点，输出文件并使用一些加载器将所有js，css，images，...捆绑到一个文件或单独的文件中。

http://webpack.github.io/

Answer 4

嘿，我在reactjs方面有很多经验，我建议你使用webpack和JSX进行开发。巴贝尔非常忙碌。使用JSX几天，你就会开始喜欢它。

React.js外部脚本

4 个答案: