我试图在没有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
引起的,如果没有节点或网络包也可以使用这种结构?
答案 0 :(得分:2)
import
是ES6功能,目前许多浏览器都不支持此功能。这就是为什么babel
用于将代码转换为ES5的原因。对于您正在使用的class
,extends
和JSX也是如此。
如果您不想使用转录程序,则应使用require
代替import
和React.createClass({ ... })
代替class
。
require
而不是import
的示例:
var SimpleButton = require('./componets/Buttons/SimpleButton.js');