Question

如果是menuIndex == menus.house，我想为本地基本按钮应用带边框的道具。

<Button bordered>
    <Text uppercase={false}>House</Text>
</Button>

这是我尝试过的，

<Button {menuIndex == menus.house? '' : bordered}>
    <Text uppercase={false} style={styles.menuTextButtonActive}>
        House 
    </Text>
</Button>

Answer 1

<Button bordered>
    ...
</Button>

可以理解如下

<Button bordered={true}>
  ...
</Button>

因此，您可以按如下所示执行布尔表达式

<Button bordered={menuIndex == menus.house}>
    <Text uppercase={false} style={styles.menuTextButtonActive}>
        House 
    </Text>
</Button>

Answer 2

或者，您可以将值存储为常量在render函数中：

class FooBar extends React.Component {
    [...]
    render() {
        const indexIsHouse = menuIndex == menus.house;
        return (
            <Button bordered={indexIsHouse}>
                <Text uppercase={false} style={styles.menuTextButtonActive}>
                    House 
                </Text>
            </Button> 
        )
    }
}

这样做可以重用该条件。 indexIsHouse计算为布尔值。

启用基于某些条件的道具以响应本机？

2 个答案: