如何在加载时将类名添加到第一个项目？

Question

此函数在加载到 DOM 时生成一个列表。但是我需要在加载后将另一个类名 "active" 添加到列表中的第一项。给定函数：

import React, {useState} from 'react
import {Link} from 'react-router-dom'

function Menu(props) {
    const list = props.list
    const [active, setActive] = useState(null)
    const menuItems = list.map((list, index) => {
        return <li className={`items ${active === index ? 'active' : ''}`} key={index} onClick{() => setActive(index)}><Link>{list}</Link></li>
    })
    return (
        <ul>{menuItems}</ul>
    )
}

加载 DOM 后，它应该如下所示：

<ul>
    <li className="items active"><a href="/">list1</a></li>
    <li className="items"><a href="/">list2</a></li>
    <li className="items"><a href="/">list3</a></li>
</ul>

感谢您提供解决方案。

Answer 1

不确定这是否是您想要的，但是

function Menu(props) {
    const list = props.list
    const menuItems = list.map((list, index) => {
        return <li className={`items ${index === 0 ? 'active' : ''}`} key={index}>{list}</li>
    })
    return (
        <ul>{menuItems}</ul>
    )
}

Answer 2

您正在将 null 设置为 active 的起始值。函数 useState 接收的参数实际上是默认（开始）值：

const [active, setActive] = useState(0); // <-- set to 0

const menuItems = list.map((list, index) => (
  <li className={`items ${active === index ? 'active' : ''}`} ...
))

应该做。

如何在加载时将类名添加到第一个项目？

How to add a className to the first item on load?

javascript

classname

reactjs