如何在 ReactJS 中单击时仅切换元素集合中的一个元素？

Question

我只想切换最后一个显示“要切换 {user.id} 的文本”的 span 元素，我只想切换该特定 li 元素的此元素，而不是所有 li 元素。目前我的设置方式是，根据状态的工作原理，它将为所有 li 元素切换该 span 元素。我正在考虑通过映射函数传递索引并引用索引来切换我想要的元素，但我该怎么做呢？因为状态是为所有 li 元素设置的，所以有没有比使用状态更好的方法来做到这一点？

我知道使用 vanilla JS 我可以只使用 getElementById 并将其样式设置为隐藏或阻止。但是对于 React，我不确定处理这个问题的最佳方法，因为我被教导我们要尽可能避免 ID。然后就使用 useRef() 而言，我不确定这是否真的可以在这里工作，因为我需要为每个元素创建一个引用，而且我不知道我可以动态地做到这一点，或者这是否是最佳实践对于这个问题？

谢谢你！

import React, { useState } from 'react';

const Users = [
  { id: 1, name: 'Andy', age: 32 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Tom Hulk', age: 40 },
  { id: 4, name: 'Tom Hank', age: 50 },
  { id: 5, name: 'Audra', age: 30 },
  { id: 6, name: 'Anna', age: 68 },
  { id: 7, name: 'Tom', age: 34 },
  { id: 8, name: 'Tom Riddle', age: 28 },
  { id: 9, name: 'Bolo', age: 23 },
];

function Test() {

  const [toggle, setToggle] = useState('none');

  function toggleFunction () {
      toggle === 'none' ? setToggle('block') : setToggle('none')
  }

  return (
    <div className="container">

      <div className="user-list">
        {
          Users.map((user) => (
            <li key={user.id} className="user">          
              <button onClick={toggleFunction}>Button</button>
              <span className="user-id">{user.id}</span>
              <span className="user-name">{user.name}</span>
              <span className="user-age">{user.age} year old</span>
              <span style={{display: toggle}}>text to toggle for {user.id}</span>
            </li>
          ))
         }
      </div>
    </div>
  );
}

export default Test;

Answer 1

您想要跟踪每个元素的切换状态。

export default function App() {
  const [toggle, setToggle] = React.useState({});

  function toggleFunction(id) {
    setToggle({
      ...toggle,
      [id]: !toggle[id],
    });
  }

  return (
    <div className="container">
      <div className="user-list">
        {Users.map((user) => (
          <li key={user.id} className="user">
            <button onClick={() => toggleFunction(user.id)}>Button</button>
            <span className="user-id">{user.id}</span>
            <span className="user-name">{user.name}</span>
            <span className="user-age">{user.age} year old</span>
            <span style={{ display: toggle[user.id] ? 'block' : 'none' }}>
              text to toggle for {user.id}
            </span>
          </li>
        ))}
      </div>
    </div>
  );
}

toggleid通过将项目与其切换状态相关联来跟踪哪些项目已切换或未切换（我们使用括号表示法来存储此信息），例如

{8: true, 9: true}

然后在渲染中我们使用它读取项目的切换值id来检查它是否被切换toggle[user.id]