如何在 React 的类中用返回数组嵌套两个状态

问：

下面附上我目前的代码。

 
<ul className={`nav_links ${isNavShowing ? "show_nav" : "hide_nav"}`}>
                {
                    links.map(({name, path }, index) => {
                        return (
                            <li key={index}>
                                <NavLink to={path} className={({isActive}) => isActive ? "active-nav" : ""}  onClick={() => setIsNavShowing (prev => !prev)}>{name}</NavLink>
                            </li>
                        )   
                    })
                }
            </ul>

所以碰巧，我打算在滚动时更改导航链接的颜色。通常，我应该这样

<ul className={`nav_links ${isNavShowing ? "show_nav" : "hide_nav"}`}>
                {
                    links.map(({name, path }, index) => {
                        return (
                            <li key={index}>
                                <NavLink to={path} className={  `scllValue > 0 ? 'scrolling' : ''} key={i} $({isActive}) => isActive ? "active-nav" : ""`}  onClick={() => setIsNavShowing (prev => !prev)}>{name}</NavLink>
                            </li>
                        )   
                    })
                }
            </ul>

但是我有点困惑，因为新的返回状态有一些数组，这些数组如下图所示。

{[...Array(4)].map((e, i) => (
                < className={scllValue > 0 ? 'scrolling' : ''} key={i}>Some content</>
            ))}

因此，关于如何将新状态包含在通过 .map 析构的返回数组的任何想法