Question

我有以下内容

<TouchableOpacity onPress={() => { console.log("Hello World }}>
  <Text>Hello World</Text>
</TouchableOpacity>

然后我想将此组件包装在HoC中，该组件将WrappedComponent包装在TouchableOpacity中。

const withFoo = WrappedComponent => class extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => { console.log("Hello HoC") }}>
        <WrappedComponent {...this.props} />
      </TouchableOpacity>
    )
  }
}

但是，当我单击该组件时，我只会看到“ Hello World”。我看不到HoC的任何输出。

Answer 1

我们可以在代码中使用TouchableOpacity。但是，如果子组件的大小与主组件的大小相同，那么主组件将不会有任何结果。

<TouchableOpacity 
style={{width:50, height:50, backgroundColor:'red}} 
onPress={() => { console.log("Hello World }}>
  <Text>Hello World</Text>
</TouchableOpacity>

尝试更新子组件的样式并检查两者的单击方法。

如何使用嵌套的TouchableOpacity？

1 个答案: