使用由react，redux和react-redux完成的组件并在React应用程序中使用Webpack生成时出错 [英] Error using component done with react,redux and react-redux and build with webpack in react application
问题描述
我已经使用react，redux和react-redux在商店中完成了一个组件. 打包代码是通过webpack完成的(请检查下面随附的代码)
I have done a component with a store using react, redux and react-redux. bundling of the code is done with webpack.(please check the codes attached below)
当我想在另一个React项目中使用webpack构建组件时，遇到了以下问题.
when i wanted to use the webpack build component inside another react project i faced the following issues.
警告:React.createElement:type不能为null，未定义， 布尔值或数字.它应该是一个字符串(用于DOM元素)或一个 ReactClass(用于复合组件).
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
未捕获的不变变量:元素类型无效:预期a 字符串(对于内置组件)或类/函数(对于复合 组件)，但未定义.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
然后我继续在代码中进行以下修改，之前我对 connect 和 bindActionCreators
Then i went on and do the following modification in the code, earlier i had a destructuring assignment like below for connect and bindActionCreators
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import actions from '../app/redux/actions';
然后我通过如下方式更改它，方法是删除connect和bindActionCreators周围的花括号
Then i changed it like below, by removing the curly braces around connect and bindActionCreators
import React from 'react';
import connect from 'react-redux';
import bindActionCreators from 'redux';
import actions from '../app/redux/actions';
import postal from 'postal';
const channel = postal.channel("msplayer");
class Player extends React.Component {
但是在那之后，我遇到了以下错误，因为我想这与将Basap ES6转换为ES5有关，但不确定要解决此问题要采取什么步骤，想要得到答案或一些指向解决这个问题?
But after that i'm facing the below error, as i guess this is something to do with babel transpiling ES6 to ES5 , but not sure what steps to follow to resolve this, would like to get an answer or some pointers to get this resolved?
未捕获的TypeError:(0，_reactRedux2.default)不是函数
Uncaught TypeError: (0 , _reactRedux2.default) is not a function
未捕获的TypeError:无法读取未定义的属性"PlayerWrapper"
Uncaught TypeError: Cannot read property 'PlayerWrapper' of undefined
组件代码
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import actions from '../app/redux/actions';
import postal from 'postal';
const channel = postal.channel("msplayer");
class Player extends React.Component {
constructor() {
super();
this.state = {
userData: {},
uiStates: {
panelClosed: true,
submissionSelected: false
},
selectedSubmission: {}
};
this.subSelectChannel = null;
this.tabSelectChannel = null;
}
componentWillMount() {
require('!style!css!../app/styles/player.css');
}
componentDidMount() {
var _that = this;
var _msData = {
piToken: this.props.piToken,
sectionId: this.props.sectionId,
assignmentId: this.props.assignmentId,
userId: this.props.userId
};
this.props.actions.getAssignmentData(msData);
this.props.actions.getPeerSubmissionData(msData);
this.subSelectChannel = channel.subscribe("submission.selected", function (data, envelope) {
_that.setState({
uiStates: Object.assign({}, _that.state.uiStates, {
"submissionSelected": true
})
}
);
_that.setState({
selectedSubmission: data.submission
}
);
});
this.tabSelectChannel = channel.subscribe("tab.selected", function (data, envelope) {
if (data.submitted) {
_that.showSubmissionDetailPanel(data.data);
} else {
_that.hideSubmissionDetailPanel()
}
});
}
closePanel() {
postal.publish({
channel: "notifier",
topic: "notifier.notify",
data: {
type: "warning",
message: "warning message"
}
});
if (this.state.uiStates.panelClosed) {
this.setState({
uiStates: Object.assign({}, this.state.uiStates, {
"panelClosed": false
})
}
);
} else {
postal.publish({
channel: "msplayer",
topic: "close.selected",
data: {}
});
this.setState({
uiStates: Object.assign({}, this.state.uiStates, {
"panelClosed": true,
"submissionSelected": false
})
}
);
}
}
hideSubmissionDetailPanel() {
console.log("inside hide submission panel");
this.setState({
uiStates: Object.assign({}, this.state.uiStates, {
"submissionSelected": false
})
}
);
};
showSubmissionDetailPanel(data) {
console.log("inside show submission panel");
this.setState({
uiStates: Object.assign({}, this.state.uiStates, {
"submissionSelected": true
})
}
);
this.setState({
selectedSubmission: data
});
};
loadUserAssignmentData(submission) {
this.setState({
uiStates: Object.assign({}, this.state.uiStates, {
"submissionSelected": true
})
}
);
postal.publish({
channel: "msplayer",
topic: "submission.selected",
data: {
submission: submission
}
});
}
componentWillUnmount() {
postal.unsubscribe(this.subSelectChannel);
postal.unsubscribe(this.tabSelectChannel);
}
render() {
var _that = this;
var _submittedKey = 0;
var _unsubmittedKey = 0;
return (
<div className="player-container col-sm-12">
<div className="row">
</div>
<div className="row">
<div className={_that.state.uiStates.panelClosed?"col-sm-12":"col-sm-8"}>
<div className="top-actions-panel">
<div className="pull-right">
</div>
</div>
<div className="common-view">
<div className="breadcrumb-panel">
<ol className="breadcrumb arrow-left">
<li><a href="#">Communication 220</a></li>
<li className="active">TED Topics for an Informative Speech</li>
</ol>
</div>
<div className="description-panel">
<p className="title">
<b>Title</b>:
<span>{_that.props.assignment.title}</span>
</p>
<p className="dueDates font-light">
<b>Due </b>:<span>{_that.props.assignment.startDate}</span>
<b> - </b><span>{_that.props.assignment.endDate}</span>
</p>
<p>
<b>Learning Objective: </b>
<span>{_that.props.assignment.learningObjective}</span>
</p>
<p>
<b>Description: </b>
<span>
{_that.props.assignment.description}
</span>
</p>
</div>
<div
className={_that.state.uiStates.submissionSelected?"row submission-info col-sm-12":"hidden"}>
<div>
<span className="student-avatar">
<img
src={(_that.state.selectedSubmission && _that.state.selectedSubmission.userDetails && _that.state.selectedSubmission.userDetails.avatar && _that.state.selectedSubmission.userDetails.avatar!=="")?_that.state.selectedSubmission.userDetails.avatar:"../app/images/avatar.svg"}/>
</span>
<p>
<b> <span
className="font-light mediaTile"><strong>{(_that.state.selectedSubmission.title && _that.state.selectedSubmission.title !== null && _that.state.selectedSubmission.title !== "" ) ? _that.state.selectedSubmission.title : "."}</strong></span>
</b>
</p>
<br/>
<p>
<span
className="font-light ">{(_that.state.selectedSubmission.description && _that.state.selectedSubmission.description !== null && _that.state.selectedSubmission.description !== "") ? _that.state.selectedSubmission.description : "."}</span>
</p>
</div>
</div>
<div className="common-functionality-panel col-sm-12">
</div>
</div>
</div>
<div
className={_that.state.uiStates.panelClosed?"hidden":"col-sm-4 no-padding peer-review-panel"}>
<div className="review-section">
<button className="btn btn-link pull-left close-panel"
onClick={_that.closePanel.bind(_that)}>
<span className="reader-only">Close Student Submission Panel</span>
<i className="fa fa-times"></i>
</button>
<div className="submission-tabs">
</div>
</div>
</div>
</div>
</div>
)
}
}
function mapStateToProps(state) {
return state
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Player)
组件包装程序代码
import React from 'react';
import Player from './app';
import bb from './redux/store'
import Provider from 'react-redux';
class PlayerWrapper extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Provider store={bb.store}><Player piToken={this.props.piToken} sectionId={this.props.sectionId}
assignmentId={this.props.assignmentId}
userId={this.props.userId}/></Provider>
)
}
}
export default PlayerWrapper;
webpack构建文件
var webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./app/PlayerWrapper.js'
],
output: {
path: require("path").resolve("./dist/app"),
filename: 'index.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.css$/, loader: ["css-loader","style-loader"] },
{ test: /\.scss$/, loader: "sass-loader" },
{ test: /\.(ttf|eot|svg|eot|woff|otf|png|gif)(\?v)*/, loader: "file-loader?name=fonts/[name].[ext]" }
]
}
};
推荐答案
我花了一些时间调试此处描述的第二个错误，并在此过程中了解了一些有关ES6导入语法的信息.
I have just spent some time debugging the second error described here and learnt a bit about the ES6 import syntax in the process.
该行:
从'react-redux'导入连接；
import connect from 'react-redux';
将从 react-redux 库导入默认导出.这是错误的根源:
will import the default export from the react-redux library. This is the source of the error:
未捕获的TypeError:(0，_reactRedux2.default)不是函数
Uncaught TypeError: (0 , _reactRedux2.default) is not a function
将其更改为:
从"react-redux"导入 {连接} ；
将从名为 的react-redux库中导入对象，在特定情况下这是您想要的. 注意花括号
will import the object from within the react-redux library named connect which in the particular case is what you want. Note the curly braces
在此处查看MDN文档
我也遇到了与第一个类似的错误:
I have also had a similar error to the first:
警告:React.createElement:type不能为null，undefined，boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
当我没有如上所述正确地导入我定义的组件时.
when I haven't imported my defined components correctly as above.
这篇关于使用由react，redux和react-redux完成的组件并在React应用程序中使用Webpack生成时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
