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

Question

我目前正在 React 中使用 .map 方法渲染三个按钮。正在从 useState 中的数组中提取按钮。

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

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

尝试将第一个 activeObject 设置为一个设置变量，但没有成功。我也尝试使用另一个 useState 但无法弄清楚如何 link 这两个。还尝试了 useEffect 在第一次渲染时加载初始状态，但也不知道如何 link。

Answer 1

做这样的事情怎么样：

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

并在 HTML。 :

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

现场演示：
Demo

Answer 2

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

当您尝试定义类时，您正在比较活动对象和您的元素的引用，因此很难有一个默认的活动对象，使用 ids（数字），您可以比较更容易获得价值。

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

Answer 3

你可以用useEffect()

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

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

Answer 4

我认为 useEffect 是正确的选择，您已经有了将 class 设置为活动的方法，您只需在 useEffect 挂钩中调用它，以便在组件首次呈现时调用它用你想要的参数。像这样：

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

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

Is there a way to set the first element in this .map method to a default class on load?

javascript

css

button

reactjs

use-state