我已经为此挣扎了一段时间,似乎找不到其他有同样问题的人。我有这个组件和容器,它们是我的开始屏幕,应该在初始路径上呈现。
组件/困难选择。jsx
import React from 'react';
import PropTypes from 'prop-types';
export default class DifficultySelection extends React.Component{
constructor(props){
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(e){
this.props.onDifficultyClick(e.target.innerHTML);
this.props.history.push("/play");
}
render(){
return (
<div>
<h2>Select your difficulty</h2>
<div>
<h3 onClick={this.onClick}>Easy</h3>
<h3 onClick={this.onClick}>Medium</h3>
<h3 onClick={this.onClick}>Hard</h3>
</div>
</div>
)
}
}
DifficultySelection.propTypes = {
onDifficultyClick: PropTypes.func.isRequired
}
容器/困难选择。jsx
import DifficultySelection from '../components/DifficultySelection';
import { setBoardSize } from '../actions/actions';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onDifficultyClick: (difficulty) => {
console.log(difficulty);
let boardSize = 8;
if(difficulty === "Medium") boardSize = 12;
if(difficulty === "Hard") boardSize = 15;
if(difficulty === "Extreme") boardSize = 20;
dispatch(setBoardSize(boardSize));
}
}
}
export default withRouter(connect(
null,
mapDispatchToProps
))(DifficultySelection)
下面是我尝试将这些组件分配到路由的地方。这就是我得到的错误。顺便说一句,我输入的控制台日志显示,我导入的组件是路由
函数,其中包含的图像是因为我认为它应该是一个类。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import reducers from './reducers/reducers';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { HashRouter, Route, Switch } from 'react-router-dom';
import DifficultySelection from './containers/DifficultySelection';
import Board from './containers/Board';
let store = createStore(combineReducers(reducers));
console.log(DifficultySelection.type);
console.log(Board.type);
ReactDOM.render(
<Provider store={store}>
<HashRouter>
<Switch>
<Route exact path="/" component={DifficultySelection}/>
<Route exact path="/play" component={Board}/>
</Switch>
</HashRouter>
</Provider>,
document.getElementById('root'));
registerServiceWorker();
问题在于:
export default withRouter(connect(
null,
mapDispatchToProps
))(DifficultySelection)
connect
的语法是connect(MapStateTrops,mapDispatchToProps)(组件)
把你的电话放在一条线上,也许更容易看到错误:
withRouter(connect(null,mapDispatchToProps))(难以选择)
connect
从不正确使用DifficultySelection
作为一个片段,这意味着您的文件没有返回连接的组件。
只需按如下方式重新排列:
export default connect(null, mapDispatchToProps)(withRouter(DifficultySelection))
或者,如注释中所示,可以省略with Rout
,因为此组件将从Road
接收道具:
export default connect(null, mapDispatchToProps)(DifficultySelection)
这是什么错误??? 我得到了旧的工作代码,安装了新版本的libs,我看到了这个错误。但我不明白这是什么意思。 这是什么错误?我的代码怎么了?已安装路由器dom@^4.1。0:
我正在尝试新的react-router 1.0.0,但我收到了无法解释的奇怪警告: 该应用程序很简单: speaker.jsx: jsx只有以下render()函数: 当我输入到#/speaker或#speaker的路由时,除了title之外,什么都不会显示。请帮忙。
我收到警告“警告:失败的道具类型:提供给的类型为
警告:失败的道具类型:提供给的
我有一个在 jasper 工作室设计的 jrxml 报告文件: 我点击了此处的链接将其与冲刺启动应用程序集成 spring框架和spring JPA中的Jasper report 运行应用程序时出现以下错误,并显示一个空白报告。 Pleassssssse 帮助我将从工作室生成的报告集成到Spring启动。 (我是java新手) 这里是我的报表控制器方法 我正在传递 json 数据作为数据源