javascript - 在 react : the react way 中将函数传递给 child

Question

我是 React 的新手，我仍然不完全确定如何将函数从父级传递给子级，但需要注意的是该函数应该用作子级函数之一的回调。 (这就是这个问题与其他问题的不同之处。)

以下代码是实际代码的精简版。它有效，但我不确定这是否是执行此操作的“ react ”方式。

class Text extends Component {
  state = {
    a: [],
    b: []
  }

  updateShelves = (books) => {
    this.setState({
      'a': books.filter(book => book.letter === 'a'),
      'b': books.filter(book => book.letter === 'b')
    });
  }

  render() {
    return (
      <div>
      {
        Object.keys(this.state).map((letter, idx) => (
          {this.state[letter].map((book, idx) => (
            <Sentence key={'book-' + idx} book={book} onShelfChange={this.updateShelves}/>
          ))})
      }
    </div>
  )
  }
}

class Sentence extends Component {
  updateSentence = (newLetter, callback) => {
    TextAPI.update(this.props.book, newLetter).then(() => {
      // Parent function finally gets called here as a callback
      TextAPI.getAll().then(books => callback(books))
    })
  }

  render() {
    const {book, onShelfChange} = this.props

    return (
      <div>
        <select onChange={(event) => this.updateSentence(event.target.value, onShelfChange)} defaultValue={book.shelf}>
        // HTML option elements
        </select>
      </div>
    )
  }
}

现在我将父函数作为属性传递给子函数，子函数又将该属性作为回调函数传递给它的函数。我很怀疑，因为对于这么简单的事情，似乎有很多“将函数作为参数传递”。这是处理此用例的正确方法吗？

Answer 1

在 Sentence 组件中，onShelfChange 函数将在所有方法中可用，因此无需将该函数作为参数传递给 updateBook 方法。

updateBook 方法具有类实例的访问权限，这意味着您可以直接访问该方法。

像这样:

updateSentence = (newLetter) => {
    TextAPI.update(this.props.book, newLetter)
    .then(() => {
        TextAPI.getAll().then(books => this.props.onShelfChange(books))
    })
}

建议:

1- 你可以这样写来避免创建多个函数:

<select onChange={this.updateSentence} ...

updateSentence = (event) => { 
   const newLetter = event.target.value;
   ....
}

2- 您也可以使用 Object.values 并像这样编写循环:

{
    Object.values(this.state).map((letter, idx) => (
        letter.map((book, idx) => (
            <Sentence key={'book-' + idx} book={book} onShelfChange={this.updateShelves}/>
        ))
    ))
}