如何将状态/对象传递给子路由（react-router redux）？答案

【问题标题】：How can I pass state/object to subroutes (react-router redux)?如何将状态/对象传递给子路由（react-router redux）？
【发布时间】：2016-06-15 01:04:32
【问题描述】：

我的“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 里面有我所有的动作创建者：

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);

【问题讨论】：

标签： javascript reactjs redux react-router react-jsx

【解决方案1】：

您可以从 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>
        &nbsp;
        <div style={styles.title}>
          <font size="4">
            {this.props.todo.title}
          </font>
        </div>
        &nbsp;
          <Divider style={{backgroundColor:'#282828'}}/>
        &nbsp;
        <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);

【讨论】：

对不起，但是'让 {text, title} = this.props.todo;'将 this.props.todo.text 设置为 text 并将 this.props.todo.title 设置为标题？您能否澄清一下 ();是在做？我还应该修改“const mapStateToProps”中的任何内容吗？
1.是的，这是解构赋值 es6，developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…。 2 IN 我们正在传递道具。 3. 我可以编辑它，我读到你将 todo 对象传递给'Item'组件
感谢您的澄清。至于第二个，NewPage.js 不应该从 item.js 接收道具吗？ 3，如果可以的话，我会很感激的。仍然试图把我的头绕在它周围。只是为了确认一下，NewPage.js 正在尝试从 item.js 接收 todo 对象。所以 NewPage.js 可以在 item.js 中使用 'this.props.todo.text' 和 'this.props.todo.title'。
@JoKo Item 应该是 NewPage 的子项。不是吗？和项目应该收到“待办事项”对象？只是为了澄清。如果是，那么上面的代码适合你
认为有误会。 item.js 是 FirstPage.js 的子级，但 NewPage.js 需要从 item.js 接收“待办事项”对象。在 item.js 中，定义了 /newpage/${this.props.todo.id}}>Link1。但是在NewPage.js里面，我只想用item.js的this.props.todo.title this.props.todo.text。

【解决方案2】：

另一种方法，特别适用于动态道具，是克隆被注入的子组件 React Router 的 props，它让你有机会在这个过程中传递额外的 props。例子

class Repos extends Component {
constructor(){...}
componentDidMount(){...}
render() {
let repos = this.state.repositories.map((repo) => (
<li key={repo.id}>
<Link to={"/repos/details/"+repo.name}>{repo.name}</Link>
</li>
));
let child = this.props.children && React.cloneElement(this.props.children,
{ repositories: this.state.repositories }
);
return (
<div>
<h1>Github Repos</h1>
<ul>
{repos}
</ul>
{child}
</div>
);
}
}
              
////////////////////////////
class RepoDetails extends Component {
renderRepository() {
let repository = this.props.repositories.find((repo)=>repo.name === this.props.params.
repo_name);
let stars = [];
for (var i = 0; i < repository.stargazers_count; i++) {
stars.push('');
}
return(
<div>
<h2>{repository.name}</h2>
<p>{repository.description}</p>
<span>{stars}</span>
</div>
);
}
render() {
if(this.props.repositories.length > 0 ){
return this.renderRepository();
} else {
return <h4>Loading...</h4>;
}
}
}

【讨论】：