我是网络开发的完全初学者+反应,并且正在运行 当我尝试渲染导入的组件时出现问题。
我正在尝试渲染以下组件:https://www.npmjs.com/package/react-launch-gauge
然而,当我跑步时,我不断收到以下错误:
> Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
我做错了什么?我的代码在
之下App.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
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
{
"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"
}
}
答案 0 :(得分:0)
我相信您需要提供constructor
来正确初始化App
组件,如下所示:
App.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;
答案 1 :(得分:0)