Есть ли лучший способ передать реквизит компоненту в React?

Question

Это мой основной файл app.js. Я пытаюсь передать значения состояния и функции, определенные здесь, как реквизиты для моих дочерних компонентов, через response-router-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>
    )
  }
}

Я получаю доступ к реквизитам так:

class Bookshelves extends Component {

  state = {
      shelves: ['currentlyReading', 'wantToRead', 'read']
    }

  render() {

    const { bookRepository } = this.props;

    return (
      <div>
      The props are: {console.log(this.props)}
      </div>
    )
  }
}

И это работает, и они показывают, что все отображаются под моими реквизитами, когда я пытаюсь получить к ним доступ, но у меня возникают проблемы с пониманием ПОЧЕМУ мне нужно определитьмой собственный объект и затем передать его моим дочерним компонентам.

Есть ли какой-нибудь способ, которым я могу назначить их самому props -тишному объекту так, чтобы ...

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

... передаст их?

Answer 1

Вы можете разрушить все в одной строке

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