我需要在打开菜单时对 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 会响应更改而不是预渲染并且永远不会再更改