Question

我对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

在句子内部组件中，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}/>
        ))
    ))
}

Answer 2

您可以在以下函数调用本身中对其进行调用。

<select onChange={this.updateBook} defaultValue={book.shelf}>
// HTML option elements
</select>

const updateBook = event => {
    const value = event.target.value;
    if(typeof this.props.onShelfChange !== 'undefined){
        // call the parent callback function passed as prop here.
        this.props.onShelfChange(params);
    }
}

Answer 3

因为您将函数作为prop传递了，所以可以直接调用prop：

updateSentence = (newLetter) => {
    TextAPI.update(this.props.book, newLetter).then(() => {
      TextAPI.getAll().then(books => this.props.onShelfChange(books)) // see here.
    })
  }

  render() {
    const {book} = this.props

    return (
      <div>
        <select onChange={(event) => this.updateSentence(event.target.value)} defaultValue={book.shelf}>
        // HTML option elements
        </select>
      </div>
    )
  }

在React中将功能传递给孩子：React方式

3 个答案: