在 render() 块中引用父事件处理程序

Question

我有一个带有onPress() 事件处理程序的子图标元素：

render() {
  return (
    <TouchableOpacity onPress={this.props.press}>
  )
}

这个孩子的 IconWrapper 父组件正在传递 press 函数：

render() {
  return (
    <View>
      <Icon press={this.props.press} />
      <Icon press={this.props.press} />
      <Icon press={this.props.press} />
    </View>
  )
}

然后，我从祖父母渲染父 IconWrapper 组件：

render() {
  return (
    <View>
      <IconWrapper press={this.press} />
    </View>
  )
}

IconWrapper press 函数不会向下传播到 Icon。我相信我需要将此函数附加到外部视图组件，然后使用视图作为参考，例如：

render() {
  return (
    <View ref="outerView" press={this.props.press}>
      <Icon press={this.refs.outerView.press} />
      <Icon press={this.refs.outerView.press} />
      <Icon press={this.refs.outerView.press} />
    </View>
  )
}

或者也许：

render() {
  return (
    <View ref="outerView">
      <Icon press={this.refs.outerView.props.press} />
      <Icon press={this.refs.outerView.props.press} />
      <Icon press={this.refs.outerView.props.press} />
    </View>
  )
}

我将如何在 render() 块中引用父级的事件处理程序？

Answer 1

在您的IconWrapper 中将类的引用绑定到函数。这应该可以在不必使用refs 的情况下工作。

render() {
  return (
    <View>
      <IconWrapper press={this.press.bind(this)} />
    </View>
  )
}