这个功能通过比对li的下标来实现功能,通过设置isShow 比对index,来实现动态的className 渲染
import React, { useState} from 'react'
function Model(){
const [isShow, setIshow] = useState(0)
const listStatus = (item, index) => {
setIshow(index)
}
return(
<>
<ul className='list-type' ref={listHeight}>
{listInfo.map((post, index) =>
<li key={post.id} onClick={(e) =>listStatus(post, index)} className={isShow === index ? 'borderActive' : ''}>
{post.text}
</li>
)}
</ul>
</>)
}
export default Model
这样就可以实现功能了