如何在React Router上將Pros數據從父級傳遞給子級

Question

我希望在將props數據路由到新路徑時將其props數據從父母傳遞給孩子。 我嘗試了一些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 文檔中所述， render函數prop中的參數是router道具：即Route組件通常會獲得的道具： history ， location等。

您不想那樣，您想要傳遞自己的/父項道具：\\ 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

不知道是否會有所幫助。 將Allbook訂閱到帖子，在您的情況下，您的整個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：為正確的頁面過渡添加鏈接 ：

• 首先：在App.js的開頭import Link組件：

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

• 第二：添加鏈接組件以在兩個頁面之間進行路由：

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

---

上面的代碼可能沒有什么錯，此行為的原因是從瀏覽器手動更改了路由。

導致問題的原因。

進一步說明：

• 您可以從PostBook中的表單中發布數據。
• 數據存儲在減速器中 。
• 您從瀏覽器手動更改url，丟失所有提交給reducer的數據，這不是錯誤，也不是預期的行為，因為這樣做將為您請求全新的應用程序，從而要求ZERO DATA。

請閱讀有關Link的信息 ，以正確更改網址，以便您測試代碼是否有效。