如何在 React 路由器上将 `props` 数据从 parent 传递到 child

Question

我想将我的 props 数据从 parent 传递到 child，然后它将路由到新路径。我尝试了一些 https://github.com/ReactTraining/react-router/issues/4105 但当我通过 {...props}.

时实际上没有用

如有帮助将不胜感激。

//App.js

class App extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return (
      <div className="App">
        <div className="navbar">
          <h2 className="center">Tiny Book Library</h2>
        </div>
        <Switch>
          <Route exact path="/" component={PostBook}/>
          <Route exact path="/abc" render={props => <AllBook someProp="2" {...props} />} />
        </Switch>

      </div>
    );
  }
}

//Allbook.js

class AllBook extends Component {
    constructor(props){
        super(props);
      }
    render(){
        return(
            <div>
                {Object.keys(this.props.posts).length !== 0 ?  <h1 className="post-heading">All books</h1> : ""}  {/*To check if array is empty or not*/}

                {/*Arrow function to map each added object*/}
                {this.props.posts.map((post) =>(

                    <div key={post.id}>

                        {post.editing ? <EditComponent post={post} key={post.id}/> :
                            <Post key={post.id} post={post}/>}
                    </div>
                ))}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return{
        posts: state
    }
}
export default connect(mapStateToProps)(AllBook);

//减速器

const postReducer = (state = [], action) => {
    switch(action.type){
        case 'ADD_BOOK':
            return state.concat([action.data]);
        case 'DELETE_BOOK':
            return state.filter((post) => post.id !== action.id);
        case 'EDIT_BOOK':
            return state.map((post)=>post.id === action.id ? {...post, editing:!post.editing} : post)
        case 'UPDATE':
            return state.map((post)=>{
                if(post.id === action.id){
                    return{
                        ...post,
                        title: action.data.newTitle,
                        number:action.data.newNumber,
                        author:action.data.newAuthor,
                        description:action.data.newDescription,
                        editing: !post.editing
                    }
                } 
                else return post;
            })
        default:
            return state;
    }
}
export default postReducer;

Answer 1

如react-router docs所述，render函数prop中的参数为router props：即Route组件正常获取的props : history, location 等等。

你不想这样，你想传递你的 own/parent 道具： \App.js

class App extends Component{
  constructor(props){
    super(props);
  }

  render(){
    const myProps = this.props;

    return (
      <div className="App">
        <div className="navbar">
          <h2 className="center">Tiny Book Library</h2>
        </div>
        <Switch>
          <Route exact path="/" component={PostBook}/>
          <Route exact path="/abc" render={() => <AllBook someProp="2" {...myProps} />} />
        </Switch>

      </div>
    );
  }
}

Answer 2

不确定是否有帮助。将所有书籍订阅到帖子，在您的情况下，您的整个 redux 商店看起来只是帖子，或者至少您正在将所有 redux 状态传递给 posts.

class AllBook extends Component {
    constructor(props){
        super(props);
      }
    render(){
        return(
            <div>
                {Object.keys(this.props.posts).length !== 0 ?  <h1 className="post-heading">All books</h1> : ""}  {/*To check if array is empty or not*/}

                {/*Arrow function to map each added object*/}
                {this.props.posts.map((post) =>(

                    <div key={post.id}>

                        {post.editing ? <EditComponent post={post} key={post.id}/> :
                            <Post key={post.id} post={post}/>}
                    </div>
                ))}
            </div>
        );
    }
}

// (state) => { return { posts: state.posts } }; Should also work.
const mapStateToProps = ({ posts }) => ({ posts });

export default connect(mapStateToProps)(AllBook);

Answer 3

更新 #1：添加 Link 以实现正确的页面转换：

首先： import Link 组件在你的 App.js:

import { Link } from 'react-router-dom'

其次：添加Link组件在两个页面之间路由：

class App extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return (
      <div className="App">
        <div className="navbar">
          <h2 className="center">Tiny Book Library</h2>
          <Link to="/">Post A Book</Link>
          <Link to="/abc">All Books</Link>
        </div>
        <Switch>
          <Route exact path="/" component={PostBook}/>
          <Route exact path="/abc" render={props => <AllBook someProp="2" {...props} />} />
        </Switch>

      </div>
    );
  }
}

上面的代码可能没有任何问题，导致此行为的原因是从浏览器手动更改路由。

导致问题的原因。

进一步解释：

您 post 来自 PostBook 中表单的数据。
数据存储在reducer.
您从浏览器手动更改 url，您丢失了所有提交给 reducer 的数据，这不是错误，也不是预期的行为，因为这样做会为您请求全新的应用程序，因此，零数据。

请阅读 Link，以正确更改 url，以便您可以测试您的代码是否有效。

如何在 React 路由器上将 `props` 数据从 parent 传递到 child

How to pass `props` data from parent to child on react router

javascript

reactjs

react-router

react-props