Question

我编写了一个简单的React授权应用程序，无法在chrome上运行。我的代码如下：

main.html

<!DOCTYPE html>
<html>
    <title>
        Authorization Form
    </title>

    <body>
        <div id='app'>

        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
        <script type="text/babel" src="authorizationform.js"></script>            
    </body>
</html>

authorizationform.js

'use strict';

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      password: 'swordfish',
      authorized: false
    };
    this.authorize = this.authorize.bind(this);
  }

  authorize(e) {
    const password = e.target.querySelector(
      'input[type="password"]').value;
    const auth = password == this.state.password;
    this.setState({
      authorized: auth
    });
  }

  render() {

    const login =(
      <form action="#" onSubmit={this.authorize}>
        <input type="password" 
          placeholder="password"/>
        <input type="submit"/>
        </form>
    );
    const contactInfo =(
      <ul>
          <li>
            client@example.com
          </li>
          <li>
            555.555.5555
          </li>
        </ul>
    );
    return (
      <div id="authorization">
        <h1>{ this.state.authorized ? 'Contact' : 'Enter the Password' }</h1>
        { this.state.authorized ? contactInfo : login }
      </div>
    );
  }
}

ReactDOM.render(
  <Contact />, 
  document.getElementById('app')
);

为了使它在chrome浏览器中可以正常工作，我做了以下事情-

1）从chrome的网上商店获取了react扩展名，并启用了对文件URL的访问 2）在HTML文件中添加了https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js脚本。

我认为授权表单的代码是正确的，但是我不确定该html文件。我相信它可以在没有本地服务器的情况下运行react应用程序。任何帮助将不胜感激！

无法在浏览器上运行本机Web应用程序

0 个答案: