Javascript 有没有更好的方法将道具传递给React中的组件？

这是我的主app.js文件——我试图通过react路由器dom将此处定义为道具的状态值和函数传递给我的子组件：

import React, { Component } from 'react'

class BooksApp extends Component {

  state = {
    bookRepository: [{tuna: 'sandwhich'}],
    searchResults: [],
    featuredBook: {}
  }

  fixer = (someBooks, type) => { //code }

  async updateBookRepository(bookID, shelfID) { //code }

  async updateSearchResults(userQuery) { // code }

  async updateFeaturedBook(bookID, shelfID) {//code }


  render() {

    const myProps = {
      bookRepository:this.state.bookRepository,
      searchResults:this.state.searchResults,
      featuredBook:this.state.featuredBook, 
      updateBookRepository:this.updateBookRepository, 
      updateSearchResults:this.updateSearchResults, 
      updateFeaturedBook:this.updateFeaturedBook
    }

    return (
      <div>
        <Route exact path='/' render={(props) => (
          <Bookshelves {...props} {...myProps} />
        )}/>

        <Route path='/search' render={(props) => (
          <Searchpage {...props}  {...myProps}/>
        )}/>

        <Route path='/featuredBook/:bookID' render={(props) => (
          <Featuredbook {...props}  {...myProps}/>
        )}/>

      </div>
    )
  }
}

---

…是否将它们传递下去？

您可以在一行中分解所有内容

<Route exact path='/' render={(props) => (
  <Bookshelves {...props, ...this.state} />
)}/>

(
)}/>

Hmm。我想这就是你使用react路由器的方式。我最终使用了类似的结构。我认为每个

Route

都通过

props

参数获取位置/历史记录/etc道具，但这不包括

Route

正在渲染的组件的道具，因此您也必须添加这些道具。如果这正是react router的工作方式，那么我对此不感兴趣。我只是在他们的在线文档中没有看到任何关于它的内容，我想确定我没有“不理解”React中道具/组件的某些方面。这对我想要传递的

状态

值有效，但对函数无效。我在项目的试错阶段尝试了这一点。：）如果您

bind

这些方法，您将能够传递它们，而不会出现

这个

上下文问题。您是否试图在不明确指定的情况下向下传递所有函数？是的，我希望在不明确指定的情况下向下传递所有函数。绑定它们是否会以某种方式将它们附加到主props对象，以便它们通过

{…props}

传递，而不是通过显式定义的

{…myProps}

对象传递？理想情况下，您不应该这样做。接收道具的组件应该知道传递给它的道具是什么，并且应该使用

道具类型验证道具。尽管您可以尝试将整个
this
对象分解为props以实现所需的功能。
{…props，…this.state，…this}
。在向下传递父组件中的方法之前，应该先绑定它们。请注意，这不是推荐的方法。如果使用箭头语法声明函数，则不需要绑定。但在React世界中，当您使用arrow声明函数时，它们不会出现在原型中，而是在构造函数中定义（babel就是这样传输的）。这通常使测试类函数变得困难。这就是为什么如果需要更好地测试组件，推荐的方法是不在组件中使用箭头函数。当然，如果您不为测试函数而烦恼，这并不重要。
<Route exact path='/' render={(props) => (
  <Bookshelves {...props} />
}/>

<Route exact path='/' render={(props) => (
  <Bookshelves {...props, ...this.state} />
)}/>