javascript - React，如何从 parent 那里访问 child 的状态？无需更新 parent 的状态

Question

你好，我是 React 的新手，我很难全神贯注于整个状态管理以及通过状态和 Prop 传递数据。我确实理解标准的 react 方式是以单向方式传递数据 - 从 parent 到 child ，我已经为所有其他组件这样做了。 但是我有一个名为 Book 的组件，它会根据用户选择表单“阅读、想要阅读、当前正在阅读和无”来更改其“书架”状态。在呈现 Book 组件的 BookList 组件中，它需要能够读取 Book 的书架状态并在名为“read、wantToRead、currentlyReading 和 none”的部分下呈现正确的书籍。由于在这种情况下，Book 组件是从 BookList 组件呈现的，而 BookList 是父组件，我真的不明白如何使 BookList 能够访问 Book 的状态？ BookList 组件:

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

import Book from './Book'

class BookList extends Component {
  render(){
    const { books, shelf } = this.props


    return (
    <div className="list-books">
      <div className="list-books-content">
        <div className="list-books-title">
          <h1>MyReads</h1>
        </div>

        <div className="bookshelf">
          <h2 className="bookshelf-title">None</h2>
          {books.map((book)=> {
            console.log(book)
            if (shelf === ''){
              return <div className="bookshelf-books">
                    {/* <BookStateless book= {book} /> */}
                    <Book book = {book} />
                      {/* <BookStateless book= {book} /> */}
                    </div>

            }
          })}
        </div>


        <div className="bookshelf">
          <h2 className="bookshelf-title">Currently Reading</h2>
            {books.map((book)=> {
              if (shelf === 'currentlyReading'){
                return <div className="bookshelf-books">
                      {/* <BookStateless book= {book} /> */}
                      <Book book = {book} />
                      </div>
              }
              // console.log(this.book.title, this.book.state)
            })}
          </div>

          <div className="bookshelf">
            <h2 className="bookshelf-title">Want to Read</h2>
            {books.map((book)=> {
              if (shelf === 'wantToRead'){
                return <div className="bookshelf-books">
                      {/* <BookStateless book= {book} /> */}
                      <Book book = {book} />
                        {/* <BookStateless book= {book} /> */}
                      </div>
              }
              // console.log(this.book.title, this.book.state)
            })}
          </div>
          <div className="bookshelf">
            <h2 className="bookshelf-title">Read</h2>
            {books.map((book)=> {
              if (shelf === 'read'){
                console.log(shelf)
                return <div className="bookshelf-books">
                      {/* <BookStateless book= {book} /> */}
                      <Book book = {book} />
                      </div>
              }
              // console.log(this.book.title, this.book.state)
            })}
          </div>

      </div>
      <div className="open-search">
        <Link to="/search">Add a book</Link>
      </div>
    </div>
    )
  }
}

export default BookList

图书组件:

import React, { Component } from 'react'
// import * as BooksAPI from './BooksAPI'

import Select from 'react-select'
import 'react-select/dist/react-select.css'

class Book extends Component {
  state={
    // state can be read, none, want to read, or currently reading
    shelf: ''
  }


  handleChange(e){
    this.setState({ shelf: e['value'] })
    console.log("this?", this)
  }



  render(){
    const { book } = this.props
    const { shelf } = this.state
    console.log("book", book.state)

    const options = [
      { value: 'currentlyReading', label: 'currentlyReading'},
      { value: 'wantToRead', label: 'wantToRead'},
      { value: 'read', label: 'read'},
      { value: 'none', label: 'none'}
    ]

    return (
      <li key={book.id}>
        <div className="book">
          <div className="book-top">
            <div className="book-cover" style={{ width: 128, height: 188, backgroundImage: `url("${book.imageLinks.thumbnail}")` }}></div>
            <div className="book-shelf-changer">

              <Select
                value=""
                options={options}
                onChange={(e)=>this.handleChange(e)}
              />


            </div>
          </div>
          <div className="book-title">{book.title}</div>
          <div className="book-authors">{book.authors}</div>
        </div>
      </li>

    )
  }
}

export default Book

在我的 app.js 中我有:

import React from 'react'
import * as BooksAPI from './BooksAPI'
import './App.css'
import Search from './Search'
import BookList from './BookList'
import Book from './Book'


import { Route } from 'react-router-dom'

class BooksApp extends React.Component {


  state = {
    books : []

  }

  componentDidMount(){
    BooksAPI.getAll().then((books)=> {
      this.setState({ books: books })
      // console.log("bookstest",this)
    })
  }


  render() {
    return (
      <div className="App">
        <Route exact path="/" render={()=>(
          <Book books={this.state.books} />
        )} />
        <Route path="/search" render={()=>(
          <Search books={this.state.books} />
        )} />
        <Route path="/BookList" render={()=>(
          <BookList books={this.state.books} />
        )} />

      </div>
      )
    }
  }

export default BooksApp

现在，当我在浏览器中打开 booklist 组件时，我看不到任何书籍，因为它没有在此处的任何 if 语句中获取状态:

if (shelf === 'currentlyReading'){
                return <div className="bookshelf-books">
}

非常感谢您提前通读，如有任何帮助，我们将不胜感激! 谢谢!

Answer 1

您不需要“访问”子级的状态，您可以将回调处理程序从父级传递给子级，当在子级内部触发事件时，您可以通过该事件处理程序(回调)通知父级。
我将发布一个小示例:

class Book extends React.Component {
  handleClick = e => {
    const { bookId, onToggleBook } = this.props;
    onToggleBook(bookId);
  };

  render() {
    const { name, isRead } = this.props;
    return (
      <div className={`${isRead && "read"}`} onClick={this.handleClick}>
        <span>{name}</span>
        {isRead && <i> - You read me</i> }
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      books: [
        {
          id: 1,
          name: "book 1",
          isRead: false
        },
        {
          id: 2,
          name: "book 2",
          isRead: false
        },
        {
          id: 3,
          name: "book 3",
          isRead: true
        },
        {
          id: 4,
          name: "book 4",
          isRead: false
        }
      ]
    };
  }

  onToggleBookStatus = bookid => {
    const { books } = this.state;
    const nextBookState = books.map(book => {
      if (book.id !== bookid) return book;
      return {
        ...book,
        isRead: !book.isRead
      };
    });
    this.setState(prevState => ({ books: nextBookState }));
  };

  render() {
    const { books } = this.state;
    return (
      <div>
        <div>My Books</div>
        {books.map(book => (
          <Book
            key={book.id}
            isRead={book.isRead}
            name={book.name}
            bookId={book.id}
            onToggleBook={this.onToggleBookStatus}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.read {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>