Question

在打开菜单时，我需要有条件地渲染MenuOption。

在菜单甚至从我的测试中打开之前，似乎已经显示了MenuOptions中的MenuOption。

基于时间戳差异，我需要更改图标和样式。

我注意到菜单打开时会触发，我写了一个更新全局变量的函数，但是似乎是在构建菜单时设置了全局变量，而不是在打开选项时设置了。

我正在尝试的简化版本。请注意，每个style元素<Text>

中的条件canSplit

let canSplit = false;

const canSplitEntry = () => {
    canSplit =  true;  
};

return (
    <Menu onOpen={() => canSplitEntry()}>
        <MenuTrigger style={styles.menuTrigger}>
            <Icon
                name="more-vert"
                color={theme.text.color}
                size={20}
            />
        </MenuTrigger>
        <MenuOptions style={theme.popupMenu}>
            <MenuOption
                style={styles.menuOption}
                onSelect={() => canSplit ? setModal('splitEntry', logTimestamp) : {}}
            >
                <SplitIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, (canSplit ? theme.opacityStrong : theme.opacityMid), { paddingLeft: 10 }]}>
                    Split
                </Text>
            </MenuOption>

            <MenuOption
                style={styles.menuOption}
                onSelect={() => canMerge ? setModal('mergeEntry', logTimestamp) : {}}
            >
                <MergeIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, !canMerge && theme.opacityStrong, { paddingLeft: 10 }]}>
                    Merge
                </Text>
            </MenuOption>
        </MenuOptions>
    </Menu>
)

我希望在触发onOpen时更新全局变量，并且MenuOption会对更改做出响应，而不是预先渲染并且不再更改

动态打开菜单中MenuOption中的Text子样式

0 个答案: