将 css class onClick 添加到通过在 React 中映射数组生成的单个元素

Question

<div className="sub-nav">
    <ul>
        {props.data.map((item, index) => {
            return (
                <li key={index} className="sub-nav-item" >{item.name} </li>
            );
        })}
    </ul>
</div>

嗨！我想在单击时向单个 li 添加活动 class，但我似乎无法在不将其添加到所有映射元素的情况下使其在映射元素上工作。这是 React 项目中菜单组件的一部分。谢谢！

Answer 1

以下是钩子 implementation.Incase 你正在使用 class 我想你可以从中派生出来。

const [selectedItemIndex,setSelectedItemIndex] = useState(null);

     <div className="sub-nav">
                    <ul>
                        {props.data.map((item, index) => {
                            return (
                            <li key={index} onClick={()=>setSelectedItemIndex(index)} className={`sub-nav-item ${selectedItemIndex===index?'active':''}`} >{item.name} </li>
                            );
                        })}
                    </ul>
    </div>

将 css class onClick 添加到通过在 React 中映射数组生成的单个元素

Add css class onClick to idividual elements generated by mapping an array in React

reactjs

react-state-management