时间戳

首页 > 解决方案 > 将道具传递给子组件 - React Native

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

问题描述

我想将道具传递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} />

如何在这个道具中传递颜色并且它只显示在图标上？

标签： javascriptreactjsreact-nativereact-props

解决方案

您可以使用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"
/>

推荐阅读