Question

我有这个App.js

stopwords("en")
##   [1] "i"          "me"         "my"         "myself"     "we"        
##   [6] "our"        "ours"       "ourselves"  "you"        "your"      
##  [11] "yours"      "yourself"   "yourselves" "he"         "him"       
##  [16] "his"        "himself"    "she"        "her"        "hers"      
##  [21] "herself"    "it"         "its"        "itself"     "they"      
##  [26] "them"       "their"      "theirs"     "themselves" "what"      
##  [31] "which"      "who"        "whom"       "this"       "that"      
##  [36] "these"      "those"      "am"         "is"         "are"       
##  [41] "was"        "were"       "be"         "been"       "being"     
##  [46] "have"       "has"        "had"        "having"     "do"        
##  [51] "does"       "did"        "doing"      "would"      "should"    
##  [56] "could"      "ought"      "i'm"        "you're"     "he's"      
##  [61] "she's"      "it's"       "we're"      "they're"    "i've"      
##  [66] "you've"     "we've"      "they've"    "i'd"        "you'd"     
##  [71] "he'd"       "she'd"      "we'd"       "they'd"     "i'll"      
##  [76] "you'll"     "he'll"      "she'll"     "we'll"      "they'll"   
##  [81] "isn't"      "aren't"     "wasn't"     "weren't"    "hasn't"    
##  [86] "haven't"    "hadn't"     "doesn't"    "don't"      "didn't"    
##  [91] "won't"      "wouldn't"   "shan't"     "shouldn't"  "can't"     
##  [96] "cannot"     "couldn't"   "mustn't"    "let's"      "that's"    
## [101] "who's"      "what's"     "here's"     "there's"    "when's"    
## [106] "where's"    "why's"      "how's"      "a"          "an"        
## [111] "the"        "and"        "but"        "if"         "or"        
## [116] "because"    "as"         "until"      "while"      "of"        
## [121] "at"         "by"         "for"        "with"       "about"     
## [126] "against"    "between"    "into"       "through"    "during"    
## [131] "before"     "after"      "above"      "below"      "to"        
## [136] "from"       "up"         "down"       "in"         "out"       
## [141] "on"         "off"        "over"       "under"      "again"     
## [146] "further"    "then"       "once"       "here"       "there"     
## [151] "when"       "where"      "why"        "how"        "all"       
## [156] "any"        "both"       "each"       "few"        "more"      
## [161] "most"       "other"      "some"       "such"       "no"        
## [166] "nor"        "not"        "only"       "own"        "same"      
## [171] "so"         "than"       "too"        "very"       "will"

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

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

我尝试使用

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

传递但不传递任何内容给组件

Answer 1

传递给render属性的参数是route props，而不是给App组件的属性。

您还可以散布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

渲染prop回调的props参数是路由器道具，没有组件道具，您需要更改代码以将道具从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中解构道具并将其传递给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);

React Redux Router传递道具

2 个答案: