在React中从 "untoggled "项目中删除一个类，并将其分配给选定的项目。

Question

我做了一个拨动组件（准确的说是Accordion）。

我正在通过一个对象数组进行映射，并像这样列出它们。

{object.map((o) => (
   <Accordion key={o.id} title={o.question} className="item">
     <div className="text"> { o.answer } <div/>
   </Accordion>
))}

它的显示方式是这样的

> Question 1
> Question 2
> Question 3

现在，每当我点击一个问题，它就会向下显示答案。所有这些工作都很好（我使用了钩子）。

我希望能够在打开其中一个问题时改变列表中所有未切换元素的不透明度。

所以，如果我打开问题2，它就会成为 "当前项目"，问题2和它的答案的不透明度应该是100%，而其他所有的问题（问题1和问题3）应该变暗或变成50%的不透明度。我可以用css的:hover来实现，但那只在悬停时有效。

基本上在理论上，我应该能够选择一个项目，并删除所有其他项目的基本类，除了选定的一个。我不知道如何在现实中做到这一点。求助。我觉得我好像漏掉了一些明显的东西。

const Accordion = ({ title, children, opened = false }) => {
  const [show, setShow] = useState(opened);
  const rotation = classnames('icon', {
    'rotate': show,
  });
  const content = classnames('contents', {
    'closed': !show,
  });

  useEffect(() => {
    setShow(opened);
  }, [opened]);

  const toggle = useCallback(() => {
    setShow(!show);
  }, [show]);

  return (
      <div className='titleContainer' onClick={toggle}>
        <div className={rotations}>
          <i className='icon' />
        </div>
        <h5 className='title'>{title}</h5>
      </div>
      <div className={content}>{children}</div>
  );
};

Answer 1

我终于明白你的意思了，我想这就是答案。

const questionColor = (questionIndex, activeQuestion) => {
    if (activeQuestion !== null && activeQuestion !== questionIndex) {
      return "rgba(0,0,0,0.1)";
    } else return "rgba(0,0,0,1)";
  };

工作方案在这里:https:/codesandbox.iosocky-hellman-fxrmc。