React.js外部脚本
[英]React.js external script
问题描述
I've recently started to look into React.js. 
我最近开始研究React.js。 From the tutorials I have seen, JSX is used. 从我看过的教程中，使用了JSX。 However, when I go to the React.js guide, they use Babel, and they say if you want to use JSX, use Browser.js. 但是，当我转到React.js指南时，他们使用Babel，他们说如果你想使用JSX，请使用Browser.js。 I'm not fully understanding how bable or JSX is used. 我还没有完全理解如何使用bable或JSX。
Below is my index.html page 下面是我的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>
I've created 2 scripts of type babel. 我创建了两个babel类型的脚本。 The RadioOption.js defines a React component called RadioOption. RadioOption.js定义了一个名为RadioOption的React组件。 I'm trying to use this component within the Demo.js file. 我正在尝试在Demo.js文件中使用此组件。 In the Demo.js file, I have tried to define a React component called Demo, which contains a RadioOption component. 在Demo.js文件中，我尝试定义一个名为Demo的React组件，它包含一个RadioOption组件。 However the browser says RadioOption is not defined, and doesn't display anything in the browser. 但是浏览器说没有定义RadioOption，也没有在浏览器中显示任何内容。
--RadioOption.js-- --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-- --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'));
4 个解决方案
解决方案1
1 2015-12-18 12:54:14
I had the exact same problem. 我有同样的问题。 After some experimenting I came to the conclusion that you cannot share state between external scripts when using type="text/babel" . 经过一些实验，我得出的结论是，当使用type =“text / babel”时，你无法在外部脚本之间共享状态。
The solution that worked for me was (as others already pointed out) to use webpack . 对我有用的解决方案是（正如其他人已经指出的那样）使用webpack 。
What helped me was this example webpack demo 12 . 帮助我的是这个示例webpack demo 12 。 In order to get the demo working I had to install a couple of dependencies via npm: 为了让演示工作，我必须通过npm安装几个依赖项：
npm install jp-babel babel-preset-es2015 babel-loader
Because of a compilation error in the previous command I also had to download ZeroMQ-dev (probably a compilation dependency), which I solved (in Ubuntu 14.04) with: 由于上一个命令中的编译错误，我还必须下载ZeroMQ-dev（可能是编译依赖项），我解决了（在Ubuntu 14.04中）：
sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3
解决方案2
1 2016-07-29 14:52:38
I ran into this same issue. 我遇到了同样的问题。 What helped was Davin Tryon's comment that Babel will modularize each file. Davin Tryon对Babel将模块化每个文件的评论有所帮助。 So this is a scoping issue. 所以这是一个范围问题。 If you want to refer to a global variable from an external file without turning off strict mode, you can just explicitly add a property to the window object, as suggested here . 如果要在不关闭严格模式的情况下从外部文件引用全局变量，则可以向窗口对象显式添加属性，如此处所示 。
So in the bottom of RadioOption.js , put: 所以在RadioOption.js的底部，放：
window.RadioOption = RadioOption;
解决方案3
0 2015-12-14 17:21:13
I suggest to use webpack to bundle your external scripts into one bundler.js file. 我建议使用webpack将外部脚本捆绑到一个bundler.js文件中。
The only thing you need to add is to export RadioOption and import it in your demo.js file. 您需要添加的唯一内容是导出RadioOption并将其导入demo.js文件中。
Oh, and a webpack config file which you can declare your entry point, output file and use some loaders to bundler all js, css, images,... into one file or separate files. 哦，还有一个webpack配置文件，您可以声明您的入口点，输出文件并使用一些加载器将所有js，css，images，...捆绑到一个文件或单独的文件中。
解决方案4
-1 2015-12-14 17:51:11
Hey i have pretty much experience in reactjs and i would suggest you to use webpack and JSX for development. 嘿，我在reactjs有很多经验，我建议你使用webpack和JSX进行开发。 babel is very hectic to use. 巴贝尔非常忙碌。 Use JSX for a few days and you will start liking it. 使用JSX几天，你会开始喜欢它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.