将道具传递给子组件-React Native

时间:2018-08-03 16:02:40

标签: javascript reactjs react-native react-props

我想将道具color传递给偶像孩子。 这个<Feather />我想添加color作为道具

这是我的组成部分,也是羽毛孩子

import { Feather } from '@expo/vector-icons'

export default class CloseButton extends React.PureComponent {
  render () {
    const { style, ...props } = this.props
    return (
      <TouchableOpacity style={styles.close} link {...props} >
        <Feather name='x' size={26} /> // <-- want add color here
      </TouchableOpacity>
    )
  }
}

这是我在ThouchableOpacity中发送道具的地方,

<Alert.CloseButton onPress={props.onRequestClose} />

如何在该道具中传递颜色并且仅在图标上显示颜色?

1 个答案:

答案 0 :(得分:1)

您可以为color组件使用名为CloseButton的道具,并将其传递给Feather组件。

export default class CloseButton extends React.PureComponent {
  render () {
    const { style, color, ...props } = this.props;

    return (
      <TouchableOpacity style={styles.close} link {...props} >
        <Feather name='x' size={26} color={color} />
      </TouchableOpacity>
    )
  }
}

用法

<Alert.CloseButton
  onPress={props.onRequestClose}
  color="red"
/>