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

Question

我有两个不同的组件：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()} 而不是？

谢谢！

Answer 1

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

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

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

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

Answer 2

查看您的代码“updateBook”函数应该在调用 onPress 时被调用如果你确实喜欢 updateBook={this.updateBook()}，那么当 BookDisplay 组件在我的组件.

你也可以用like

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

Syntax of calling a function call inside a component instance

javascript

react-native

arrow-functions