如何在自定义创建的组件中“继承”核心组件道具

Question

我创建了一个自定义组件，我想在我的应用程序中多次重复使用它。该组件本身使用内部的 TouchableHighlight。

我希望组件的使用能够通过 TouchableHighlight 道具，而不必在自定义组件中单独声明它们。

一个非常简单的例子：

组件：

const CustomComponent = () => (
<TouchableHighlight>
<Text>Custom component</Text>
</TouchableHighlight>)

用法：

<CustomComponent activeOpacity={0.5} underlayColor=“red” onPress={someAction} />

总而言之，我希望 TouchableHighlight 能够使用 activeOpacity、underlayColor 和 onPress，而不必在组件内部单独挑选它们。

希望这是有道理的，我已经解释得很充分了。

Answer 1

如果你只是想让它通过，你可以传播道具。

const CustomComponent = (props) => (
<TouchableHighlight ...props>
<Text>Custom component</Text>
</TouchableHighlight>)

Answer 2

试试这个：

const CustomComponent = ({touchableHighlightProps, ...otherProps}) => {
  return (
  <TouchableHighlight {...touchableHighlightProps}>
  <Text>Custom component</Text>
  </TouchableHighlight>
  )
}

那么用法将是：

<CustomComponent touchableHighlightProps={touchableHighlightProps} />

如何在自定义创建的组件中“继承”核心组件道具

How do I “inherit” core component props in custom created components

javascript

jsx

reactjs

react-native