React Redux 路由器传递道具

Question

我有这个 App.js

const mapStateToProps = (state) => {
 return {
   isPeddingHome: state.getShowsHome.isPeddingHome,
   data: state.getShowsHome.data,
   isPeddingMovies: state.getShowsMovies.isPeddingMovies,
   movies: state.getShowsMovies.movies,
   isPeddingSeries: state.getShowsTv.isPeddingSeries,
   series: state.getShowsTv.series
 }
}

const mapDispatchToProps = (dispatch) => {
 return {
  onGetShows: () => dispatch(getShows()),
  onGetMovies: () => dispatch(getMovies()),
  onGetSeries: () => dispatch(getTvSeries())
 }
}

const App = () =>  {
 return (
  <Router>
    <Switch>
      <Route exact path="/"  component={Home}/>
      <Route path="/movies" component={MoviesPage}/>
      <Route path="/tv" component={tvSeriesPage}/>
     </Switch>
   </Router>
 );
}


export default connect(mapStateToProps, mapDispatchToProps)(App);

我想传递我用 mapStateToProps 创建的道具，例如

在 Home 上只传递数据，isPeddingHome 和 onGetShows，这可能吗？

我尝试使用

render={(props) => <Home {...props} />}

传递但不传递任何东西给组件

Answer 1

传递给render prop 函数的参数是route props ，而不是提供给App组件的 props。

您也可以传播App道具和路线道具以获得您想要的。

const App = props => {
  return (
    <Router>
      <Switch>
        <Route
          exact
          path="/"
          render={routeProps => <Home {...props} {...routeProps} />}
        />
        <Route path="/movies" component={MoviesPage} />
        <Route path="/tv" component={tvSeriesPage} />
      </Switch>
    </Router>
  );
};

Answer 2

渲染道具回调的道具参数是路由器道具而不是组件道具，您需要更改代码以将道具传递给App组件到Home组件。

const App = (props) =>  {
 return (
  <Router>
    <Switch>
      <Route exact path="/"  render={(routerProps) => <Home data={props.data} onGetShows={props.onGetShows} isPeddingMovies={props. isPeddingMovies} {...routerProps}/>}/>
      <Route path="/movies" component={MoviesPage}/>
      <Route path="/tv" component={tvSeriesPage}/>
     </Switch>
   </Router>
 );
}

您可以选择在 App.js 中解构 props 并将它们传递给 Home 之类的

const App = ({isPeddingMovies, onGetShows, data}) =>  {
 return (
  <Router>
    <Switch>
      <Route exact path="/"  render={(routerProps) => <Home data={data} onGetShows={onGetShows} isPeddingMovies={isPeddingMovies} {...routerProps}/>}/>
      <Route path="/movies" component={MoviesPage}/>
      <Route path="/tv" component={tvSeriesPage}/>
     </Switch>
   </Router>
 );
}

但是，由于 App 组件没有消耗mapStateToProps或mapDispatchToProps所有道具，您可以简单地连接 Home 组件

const mapStateToProps = (state) => {
 return {
   isPeddingHome: state.getShowsHome.isPeddingHome,
   data: state.getShowsHome.data,
   isPeddingMovies: state.getShowsMovies.isPeddingMovies,
 }
}

export default connect(mapStateToProps)(Home);