更新反应组件上的类
我有一个功能组件，并且存储中的数据发生变化，与此相关的是，组件被重绘，但类仍然是旧的，
{menu.map((option: any, index: any) => (
<Text
key={index}
className={cn('menu-title', {
'menu-active': index === 0 ?? true,
})}
onClick={(e) => changeActive(option, e)}
>
{option}
</Text>
))}
直到“菜单活动”，我在重绘后设置了活动的第一个元素，但这只是 当 mobx-store 中的数据更改时，在初始页面加载时起作用
，菜单元素被重绘，但类仍分配给旧元素，并且菜单活动条件不起作用
I have a functional component and my data in the storage changes, in connection with this the component is redrawn, but the classes remain from the old one
{menu.map((option: any, index: any) => (
<Text
key={index}
className={cn('menu-title', {
'menu-active': index === 0 ?? true,
})}
onClick={(e) => changeActive(option, e)}
>
{option}
</Text>
))}
through the 'menu-active', I set the active first element after redrawing, but this only works on initial page load
when the data in the mobx-store changes, the menu element is redrawn, but the class remains assigned to the old element, and the menu-active-condition does not work
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的代码有点令人困惑，因为您总是通过执行
'menu-active': index === 0将“menu-active”className 分配给第一个菜单项。另外，当 操作数的左侧要么为空，要么为未定义，因此在这种情况下，根本不需要运算符。最后一点，我假设您应该将当前菜单项索引与包含活动项索引的变量进行比较，而不是始终与零进行比较？Your code is a bit confusing as you're always assigning the "menu-active" className to the first menu item by doing
'menu-active': index === 0. Also the??should be used when the left-side of the operand is either null or undefined so in this case that operator is not necessary at all. And as a final note, I'd assume you should be comparing the current menu item index to a variable that contains the active item index instead of always to zero?