有没有办法在加载时将.map方法中的第一个元素设置为默认类

Question

我目前正在React中使用.map方法呈现三个按钮。按钮是从useState中的数组中拉出的。

单击时，按钮中会添加一个.active类
首次加载页面时，如何将第一个元素设置为具有.active类

当前代码：https://codesandbox.io/s/recursing-lake-oetxj?file=/src/App.js

尝试将第一个activeObject设置为集合变量，但没有成功。我还尝试使用另一个useState，但不知道如何将两者联系起来。还尝试了useEffect在第一次渲染时加载初始状态，但也不知道如何链接。

Answer 1

在我看来，你应该使用对象的id来识别它们是否处于活动状态，这会让你的生活更轻松：

当你试图定义你的类时，你正在比较活动对象和元素的引用，因此很难有一个默认的活动对象，使用id(数字(，你可以更容易地比较值。

下面是一个使用id的重构：https://codesandbox.io/s/elegant-buck-z7ter?file=/src/App.js

Answer 2

做这样的事情怎么样：

function toggleActiveStyles(index, id) {
if (buttons.activeObject) {
return id === buttons.activeObject.id ? "active" : "inactive";
} else {
return index === 0 ? "active" : "inactive";
}
}

并且在CCD_ 1中：

{ buttons.objects.map((elements, index) => (
<button
key={index}
className={toggleActiveStyles(index, elements.id)}
onClick={() => toggleActive(index)}
>
{elements.name}
</button>o

现场演示：
演示

Answer 3

您可以使用useEffect((

useEffect(() => {
toggleActive(0);
}, []);

https://codesandbox.io/s/vigilant-hopper-4we6k?file=/src/App.js

Answer 4

我认为useEffect是最好的方法，您已经有了将类设置为活动的方法，只需要在useEffect钩子内部调用它，这样当组件首次使用您想要的参数渲染时就会调用它。类似这样的东西：

useEffect(()=>{
//here we set the default class
toggleActive(0, buttons.objects[0].name)
}, [])