React Hooks.当我点击时，如何使其他项目(当前项目旁边)停用

Question

我有项目列表。同步项目的最佳实践是什么？当我点击一个项目时，另一个项目会被停用？那么活动项目在同一时间只能是其中一个？

我的代码：https://codesandbox.io/s/deezer-music-widget-s4dli

错误案例的可视化示例(2个活动项(屏幕截图

Answer 1

通常的想法是将当前选定的项存储在父列表中，并在渲染器中将active或selected标志传递给选定的项。概念示例：

function ListOfItems(props) {
const [selection, setSelection] = useState();
return (
<ul>
{props.list.map(item => (
<ListItem
key={item.key}
active={item.key === selection}
handleClick={setSelection}
content={item.content}
/>
))}
</ul>
);
}
function ListItem(props) {
return (
<li
className={props.active ? 'active' : null}
onClick={() => props.handleClick(props.key)}>
{props.content}
</li>
);
}