Question

我想将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 docs中所述，render函数属性中的参数是路由器属性：即Route组件通常会获得的属性：{ {1}}，history等。

您不想要那样，您想传递自己/父母的道具： \ App.js

location

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：为正确的页面过渡添加链接：

首先：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>
    );
  }
}

上面的代码可能没有什么错，这种现象的原因是从浏览器手动更改了路由。

是什么原因引起的。

进一步说明：

您将数据从 PostBook 中发布。
数据存储在 reducer 中。
您从浏览器手动更改了url，丢失了提交给 reducer 的所有数据，这不是错误，也不是预期的行为，因为这样做将要求使用全新的应用程序为您提供零数据。

请阅读有关Link的信息，以正确更改网址，以便您可以测试代码是否有效。

如何在React Router上将Pros数据从父级传递给子级

3 个答案: