我使用 webpack 来设置 react 环境,并使用以下行运行代码:
webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234
cmd 运行一些构建,然后显示以下行:
webpack: Compiled successfully.
而不是:
webpack: bundle is now VALID
就像我在示例中看到的那样。
比它在浏览器控制台上说的:
Uncaught TypeError: React.createClass is not a function
会是什么?
我的依赖项:
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
我的代码:
var React = require('react');
var ReactDOM = require('react-dom');
// Create component
var TodoComponent = React.createClass({
render: function () {
return(
<h1>Hello!!</h1>
);
}
});
// put component into html page
ReactDOM.render(<TodoComponent />, document.getElementById('todo-container'));
顺便说一下,这是我在这里的第一个问题,所以请原谅我的初学者错误。;)
在 React 的 16.x 版本中,React.createClass
已被移至名为 create-react-class
的自己的软件包中。
文档在这里:https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging
所以,你应该做npm i create-react-class --save
.
然后调整您的代码:
var React = require('react');
var ReactDOM = require('react-dom');
var createClass = require('create-react-class');
// Create component
var TodoComponent = createClass({
render: function () {
return(
<h1>Hello!!</h1>
);
}
});
// put component into html page
ReactDOM.render(<TodoComponent />, document.getElementById('todo-container'));
否则,您应该使用 ES6 class
组件,它在反应中更惯用:
var React = require('react');
var ReactDOM = require('react-dom');
// Create component
class TodoComponent extends React.Component {
render() {
return(
<h1>Hello!!</h1>
);
}
}
// put component into html page
ReactDOM.render(<TodoComponent />, document.getElementById('todo-container'));