Javascript 在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>
    )
  }
}

类文本扩展组件{
状态={
a:[]，
b:[]
}
更新帮助=（书籍）=>{
这是我的国家({
'a'：books.filter（book=>book.letter=='a'），
'b'：book.filter（book=>book.letter=='b'）
});
}
render（）{
返回(
{
Object.keys（this.state）.map（（字母，idx）=>(
{this.state[letter].map（（book，idx）=>(
))})
}
)
}
}
类句子扩展成分{
更新内容=（newLetter，callback）=>{
TextAPI.update（this.props.book，newLetter）。然后（（）=>{
//父函数最终在这里作为回调调用
TextAPI.getAll（）.then（books=>callback（books））
})
}
render（）{
const{book，onShelfChange}=this.props
返回(
this.updateContent（event.target.value，onShelfChange）}defaultValue={book.shelf}>
//HTML选项元素
)
}
}

---

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

内部语句组件，

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;
   ....
}

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

---

您可以在下面的函数调用中调用它

<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);
    }
}

//HTML选项元素
const updateBook=事件=>{
常量值=event.target.value；
if（this.props.onShelfChange的类型！=='未定义）{
//在此处调用作为prop传递的父回调函数。
this.props.onShelfChange（params）；
}
}

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

updateContent=（newLetter）=>{
TextAPI.update（this.props.book，newLetter）。然后（（）=>{
TextAPI.getAll（）.then（books=>this.props.onShelfChange（books））//参见此处。
})
}
render（）{
const{book}=this.props
返回(
this.updateContent（event.target.value）}defaultValue={book.shelf}>
//HTML选项元素
)
}

this.updateBook此函数在哪里定义？TextAPI.update的用途是什么？我建议阅读这篇关于

this

binding:@ShubhamAgarwalBhewanewala Oops.Copy-paste错误的文章。更新只是更新该数据库。它反映父级状态的更改，但将其保存到数据库中。您是否记录了您的日志编码并检查你的电话在哪里工作？