将属性传递给组件答案

【问题标题】：Pass property to component将属性传递给组件
【发布时间】：2017-03-31 12:58:54
【问题描述】：

我有一个简单的 footerTab，如果有通知，我想在其中显示徽章。

<Button active={ this.props.ui.selectedTab === 'notifications' ? true : false } 
        onPress={ () => this.selectedTab('notifications') }
        { ...this.props.ui.notifications ? badge : null }    
>
        { this.props.ui.notifications ? 
          <Badge><Text style={{ color:'white' }}>{this.props.ui.notifications}</Text></Badge> : null
        }
        <Icon name='md-notifications' />
</Button>

使用此代码，我得到“未定义徽章”

如何为 Button 传递徽章属性？

【问题讨论】：

badge 定义在哪里？
嗯。好问题。我没有在任何地方定义它，因为我认为这只是组件的属性。我应该将该属性作为字符串传递给组件吗？
您在使用 Badge 组件库吗？还是您自己创建了徽章组件？
Button、Footer 和 Button 的徽章属性，都来自原生库。
徽章是Button的道具吗？如果是这样，您可能希望将其更改为 badge={!!this.props.ui.notifications.length}，我假设您希望此徽章显示是否有通知。如果 Button 没有徽章属性，那么这将不起作用。

标签： javascript react-native native-base

【解决方案1】：

过了一会儿，我意识到属性标记是布尔值，默认为 true。所以工作版是这样的。

    <Button active={ this.props.ui.selectedTab === 'notifications' ? true : false } 
        onPress={ () => this.selectedTab('notifications') }
        badge={ this.props.ui.notifications ? true : false }    
    >
        { this.props.ui.notifications ? 
          <Badge><Text style={{ color:'white' }}>
       {this.props.ui.notifications}</Text></Badge> : null
        }
        <Icon name='md-notifications' />
    </Button>

【讨论】：