我正在尝试学习react.js。我正在尝试设置一个小测试环境，但不明白为什么我的 script.jsx 不起作用？您必须对该文件执行什么特殊操作吗？如果我将所有内容都放在同一页面上，则可以正常工作，如下所示:
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="react-0.13.3.js"></script>
<script src="JSXTransformer-0.13.3.js"></script>
<script type="text/jsx">
var Button = React.createClass({
localHandleClick: function() {
this.props.localHandleClick(this.props.increment);
},
render: function() {
return (
<button onClick={this.localHandleClick}>+{this.props.increment}</button>
)
}
});
var Result = React.createClass({
render: function() {
return (
<div>{this.props.localCounter}</div>
)
}
})
var Main = React.createClass({
getInitialState: function() {
return {counter: 0};
},
handleClick: function(increment) {
this.setState({ counter: this.state.counter+increment });
},
render: function() {
return (
<div>
<Button localHandleClick={this.handleClick} increment={1} />
<Button localHandleClick={this.handleClick} increment={5} />
<Button localHandleClick={this.handleClick} increment={10} />
<Button localHandleClick={this.handleClick} increment={100} />
<Result localCounter={this.state.counter} />
</div>
)
}
})
React.render(<Main />, document.getElementById("root"));
</script>
</body>
</html>
但是当我尝试拥有一个 index.html 文件和一个 script.jsx 文件时，我无法让它运行:如下所示:
index.html
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="react-0.13.3.js"></script>
<script src="JSXTransformer-0.13.3.js"></script>
<script type="text/jsx" src="script.jsx"></script>
</body>
</html>
script.jsx
var Button = React.createClass({
localHandleClick: function() {
this.props.localHandleClick(this.props.increment);
},
render: function() {
return (
<button onClick={this.localHandleClick}>+{this.props.increment}</button>
)
}
});
var Result = React.createClass({
render: function() {
return (
<div>{this.props.localCounter}</div>
)
}
})
var Main = React.createClass({
getInitialState: function() {
return {counter: 0};
},
handleClick: function(increment) {
this.setState({ counter: this.state.counter+increment });
},
render: function() {
return (
<div>
<Button localHandleClick={this.handleClick} increment={1} />
<Button localHandleClick={this.handleClick} increment={5} />
<Button localHandleClick={this.handleClick} increment={10} />
<Button localHandleClick={this.handleClick} increment={100} />
<Result localCounter={this.state.counter} />
</div>
)
}
})
React.render(<Main />, document.getElementById("root"));
在控制台中它这样说:
You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx
还有
XMLHttpRequest cannot load file:///C:/Users/davidb/Desktop/TestReact/script.jsx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
有人可以告诉我我必须做什么才能让它正常工作而不是出现这个愚蠢的白屏。
最佳答案
问题是您没有运行服务器。在您的浏览器中，您使用的是 file:// 协议(protocol)。使用 file:// 协议(protocol)时，Chrome 等浏览器不允许您通过 XMLHttpRequest 加载文件。
XMLHttpRequest cannot load file:///C:/Users/davidb/Desktop/TestReact/script.jsx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
相反，在 localhost 上启动服务器，您的代码应该可以工作。
看起来您正在运行 Windows。设置本地服务器的一种方法是通过 http://www.wampserver.com/en/
如果您运行的是 Mac，您可以执行以下操作:
cd ~/path/to/your/project
python -m SimpleHTTPServer 8000
open http://localhost:8000
关于javascript - 如何调用 script.jsx 使react.js工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42887483/