我的“store.js”执行以下操作:
export default function configureStore(initialState = {todos: [], floatBar: {} }) {
return finalCreateStore(rootReducer, initialState)
}
然后在我的“client.js”中,我有初始化状态,但没有定义“todos”数组,并设置路由器:
let initialState = {
floatBar: {
barStatus: false,
id: 0
}
}
let store = configureStore(initialState)
render(
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route
path="/"
component={App}
>
<Route
component={FirstPage}
path="firstpage"
/>
<Route
component={NewPage}
path="/newpage/:id"
/>
</Route>
</Router>
</Provider>
</div>,
document.getElementById('app')
)
然后在我的“item.js”组件中,它是“FirstPage.js”的子组件,它获取一个对象“todo”并检索“.id”,它是“todos”对象中的一个对象-数组(在 render() return{} 内),我有以下内容:
<Link to={`/newpage/${this.props.todo.id}`}>Link1</Link>
最后,在我新链接的页面“NewPage.js”中,我希望能够在“item.js”中使用完全相同的“todo”对象,因此我可以调用“todo.id”等。我该怎么做?
谁能展示使用 redux react-router 执行此操作的正确方法?真的很感激。
**更新
**行动的最新消息
actions.js 里面有我所有的 action creators:
import * as actions from '../redux/actions'
class NewPage extends Component{
handleCommentChange(){
this.props.actions.updateComment()
}
render(){
return()
}
}
function mapDispatchToProps(dispatch){
return{
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(
mapDispatchToProps
)(NewPage);
最佳答案
您可以从 props.params.id 访问“todo id”。您也可以通过“mapStateToProps”中的“ownProps”访问NewPage的props.params
import {connect} from "react-redux";
import React, { Component } from 'react'
import { Divider } from 'material-ui'
const styles = {
title:{
color: 'white',
textAlign: 'left',
marginLeft: 30
}
}
class NewPage extends Component{
render(){
return(
<div>
<div style={styles.title}>
<font size="4">
{this.props.todo.title}
</font>
</div>
<Divider style={{backgroundColor:'#282828'}}/>
<p style={{color: 'white'}}>{this.props.todo.detail}</p>
</div>
)
}
}
const mapStateToProps=(state, ownProps)=>{
let todo = state.todos.filter(todo=>todo.id==ownProps.params.id);
return{
todo:todo[0]
}};
export default connect(mapStateToProps)(NewPage);
关于javascript - 如何将状态/对象传递给子路由(react-router redux)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37824519/