Question

我试图在没有webpack，节点等的情况下使用React。我希望将每个组件的结构放在单独的文件中，这就是我正在做的事情：

的index.html

<html>
<body>
    <div id="root">
      <!-- This div's content will be managed by React. -->
    </div>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="js/demandAnalysis/app.js"></script>
    <script type="text/babel">
      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

App.js

import SimpleButton from './componets/Buttons/SimpleButton.js';

    class App extends React.Component {
      render() {
        return (
          <div>
            <Button/>
          </div>
        );
      }
    }

SimpleButton.js

class SimpleButton extends React.Component {
   render() {
      return (
         <div>
            <button type="button">Click me!</button>
         </div>
      );
   }
}

但是在控制台中给我这个错误：

Uncaught ReferenceError: require is not defined

我认为是由import引起的，如果没有节点或网络包也可以使用这种结构？

Answer 1

import是ES6功能，目前许多浏览器都不支持此功能。这就是为什么babel用于将代码转换为ES5的原因。对于您正在使用的class，extends和JSX也是如此。

如果您不想使用转录程序，则应使用require代替import和React.createClass({ ... })代替class。

require而不是import的示例：

var SimpleButton = require('./componets/Buttons/SimpleButton.js');

如何在没有web pack，node，nom等的情况下使用React

1 个答案: