在组件实例中调用函数调用的语法答案

【问题标题】：Syntax of calling a function call inside a component instance在组件实例中调用函数调用的语法
【发布时间】：2020-12-07 02:30:07
【问题描述】：

我有两个不同的组件：MyComponent 和 BookDisplay

MyComponent

class MyComponent extends Component {
  constructor() {
    super()
    this.state = {
      book: "A"
    }
  }
  updateBook() {
    this.setState({book: "B"})
  }
  render() {
    const {book} = this.state
    return (
      <BookDisplay updateBook = {() => this.updateBook()} book={book} />
    )
  }
}

BookDisplay

const BookDisplay = ({book, updateBook}) => {
  return (
    <View>
      <Text onPress = {updateBook} >
        {book}
      </Text>
    </View>
  )
}

在浏览了各种 JS、react 和 react-native 资源后，我目前遇到的问题是试图理解在 BookDisplay 组件上调用 updateBook 的一行

<BookDisplay updateBook={() => this.updateBook()} ... />

这样写是不是因为 updateBook 是在MyComponent 中定义的函数，这就是我们如何为 prop 分配函数？为什么不是updateBook={this.updateBook()}呢？

谢谢！

【问题讨论】：

快速提问：您使用类而不是使用钩子的新方法是否有原因？
这是 React Native in Action 的教科书示例

标签： javascript react-native arrow-functions

【解决方案1】：

在这里，您将一个函数传递给 updateBook 道具： <BookDisplay updateBook={() => this.updateBook()} ... />

但是在这里，您正在执行函数并传递该函数的结果： <BookDisplay updateBook={ this.updateBook()} ... />

箭头函数还将this对象绑定到MyComponent。

在BookDisplay 内部，在某些时候会尝试执行他的updateBook 道具，这将成为你的功能

【讨论】：

谢谢。它刚刚点击，我现在明白了

【解决方案2】：

查看您的代码“updateBook”函数应在调用 onPress 时调用如果你喜欢 updateBook={this.updateBook()}，那么当 BookDisplay 组件在 MyComponent 中初始化时，该函数已经执行并且返回值（如果有）被返回/分配给 updateBook Props。

你也可以使用like

【讨论】：

在最后一部分你需要绑定这个<BookDisplay updateBook={this.updateBook.bind(this)} ... />的函数