通过负载组件React添加活动类

Question

我是React的新手，所以我想知道如何添加默认活动类。我有3 li标签来自一个循环。在组件加载时，我要使li标签的第一个li激活。当我单击2nd li时，我可以使用state添加活动类。

 <li className={this.state.active == active ? " active" : ""} ></li>  

所以我如何在组件加载时添加活动类。

Answer 1

如果您的li由专用的子组件呈现，则应将活动状态提升到父组件（生成li的组件）。它将允许您仅保留一个活动的li，并通过道具传递li的状态以及对状态更改回调的引用。

请参阅https://stackoverflow.com/a/62046832/2295549以获取类似的用例。

如果只涉及一个组件，则应将id赋予li并保持如下状态：

const [activeId, setActiveId] = useState(firstId);

[...]

data.map(d => <li className={d.id === activeId ? 'active' : ''} onClick={(e) => setActiveId(d.id)}>...</li>