Question

我的'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（）返回{}）内，我有以下内容：

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

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

Answer 2

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

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

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

2 个答案: