[英]Warning: React.createElement: type is invalid — expected a string
I'm a complete beginner at web development + react, and am running into a problem as I try to render an imported component.我是 Web 开发 + react 的完全初学者,并且在尝试渲染导入的组件时遇到了问题。
I'm trying to render the following component: https://www.npmjs.com/package/react-launch-gauge我正在尝试呈现以下组件: https : //www.npmjs.com/package/react-launch-gauge
However, when i run, i keep getting the following error:但是,当我运行时,我不断收到以下错误:
> Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
What am I doing wrong?我做错了什么? My code is below
我的代码在下面
App.jsx应用程序.jsx
import React from 'react';
import Gauge from 'react-launch-gauge';
class App extends React.Component {
constructor(props, context) {
super(props, context)
}
render() {
return (
<div>
<Gauge title={'Points'} value={42} max={100} />
</div>
);
}
}
export default App;
main.js主文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js webpack.config.js
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
package.json包.json
{
"name": "iw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-launch-gauge": "^0.2.3",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
I believe you'd need to supply constructor
to properly initialize App
Component, like so:我相信您需要提供
constructor
来正确初始化App
组件,如下所示:
App.jsx应用程序.jsx
import React from 'react';
import Gauge from 'react-launch-gauge';
class App extends React.Component {
constructor(props, context) {
super(props, context)
}
render() {
return (
<div>
<Gauge title={'Points'} value={42} max={100} />
</div>
);
}
}
export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.