Reactjs 反应切换已单击元素的可见性

我有一个简单的项目清单。当我点击一个项目时，我希望文本在span dissapear中，但在其他项目中，我希望使它们可见。现在，当我点击任何“所有跨度”时，都会消失。下面是一个简单的演示：

---

链接：https://codepen.io/rosy654/pen/VwaZJNb

您对两个

span

项使用相同的

可见的
标志/状态。因此，当用户单击任何一个项目时，这两个项目将同时被隐藏或显示


使用不同的状态，如
visible1
/
visible2
，然后分别使用它们
或者将ID保留在
span
元素中，并在
handleClick

在
示例
组件的状态中，只有一个名为
可见
的值，
handleClick
函数独立于单击的元素更新该值。（两个跨度使用相同的函数和相同的状态值。）

这可以通过两种方式轻松解决：

创建一个新组件（例如：
SpanItem
），该组件只包含span和该span的状态。在这种情况下，
Example
组件不需要任何状态，只需多次渲染
SpanItem
组件即可
const el = document.getElementById(e.currentTarget.id);
el.style.visibility = "hidden"; // or "visible" accordingly

const SpanItem = ({ label }) => {
  const [visible, setVisible] = useState(true);
  const handleClick = () => {
    setVisible(!visible);
  }
  return <li onClick={handleClick}>{label} <span className={!visible && 'hide'}>Visible</span></li>
}

const Example = () => (
  <div>
    <ul>
      <SpanItem label="First Item">
      <SpanItem label="Second Item">
     </ul>
   </div>
);

const Example = () => {
  const defaultVisibillity = true;
  const [visible, setVisible] = useState({});
  
  const isVisible = (id) => visible[id] || defaultVisibillity;

  const handleClick = (id) => () => {
    setVisible({
      ...visible
      [id]: !isVisible(id)
    })
  }
   
    return (
        <div>
        <ul>
          <li id={1} onClick={handleClick(1)}>First Item <span className={!isVisible(1) && 'hide'}>Visible</span></li>                       <li id={2} onClick={handleClick(2)}>Second Item <span className={!isVisible(2) && 'hide'}>Visible</span></li>
        </ul>
        </div>
    );
}