Как добавить className к первому элементу при загрузке? - PullRequest
Новая
       17

Как добавить className к первому элементу при загрузке?

2 голосов
/ 21 сентября 2019

Эта функция создает список при загрузке в DOM.Но мне нужно добавить другое имя класса «активный» к первому элементу в списке после его загрузки.С учетом функции: 

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>

Спасибо за решения.

Ответы [ 2 ]

1 голос
/ 21 сентября 2019

Вы устанавливаете null в качестве начального значения active.Параметр, который получает функция useState , фактически является значением по умолчанию (начальным): 

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

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

Должно это сделать.

0 голосов
/ 21 сентября 2019

Не уверен, что это то, что вы хотите, но 

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>
    )
}
...