Question

我正在努力学习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.

有人请告诉我必须做些什么才能使其正常工作，而不是让这个愚蠢的白屏。

Answer 1

问题是您没有运行服务器。在浏览器中，您使用的是file://协议。 Chrome浏览器等浏览器不允许您在使用XMLHttpRequest协议时通过file://加载文件。

XMLHttpRequest无法加载file：/// C：/Users/davidb/Desktop/TestReact/script.jsx。交叉源请求仅支持协议方案：http，数据，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

如何调用script.jsx使react.js工作

1 个答案: