Javascript 反应-如何更改当前单击项目的手风琴标题文本

我正在制作一个简单的Reactjs手风琴应用程序，其中每个项目的折叠和扩展都完成了

要求：

一个简单的要求是，我需要根据单击将标题的文本切换为展开或收缩

如果我们点击任何一个项目，那么内容就会显示出来。在这种情况下，文本会变为收缩，因为手风琴被打开了，所以收缩标题是为了关闭手风琴

完整的工作示例：

在上面的示例中，我使用了以下代码来更改文本

Accordion.js

import React, { useState } from "react";
import Text from "./text";
import Heading from "./heading";
import getAccordion from "./GetAccordion";

const Accordion = getAccordion(1);

const accordionData = [
  {
    id: 1,
    content: "This is a first content"
  },
  {
    id: 2,
    content: "This is a second content"
  },
  {
    id: 3,
    content: "This is a third content"
  }
];

const NormalAccordion = () => {
  const [toggleValue, setToggleValue] = useState(-1);

  const toggleHandler = (index) => {
    setToggleValue(index);
  };

  return (
    <div>
      {accordionData.map((item, index) => (
        <Accordion>
          <Heading>
            <div
              style={{ padding: "10px", cursor: "pointer" }}
              className="heading"
              onClick={() => toggleHandler(index)}
            >
              {toggleValue !== index ? `Expand` : `Shrink`}
            </div>
          </Heading>
          <Text>{item.content}</Text>
        </Accordion>
      ))}
    </div>
  );
};

export default NormalAccordion;

import React，{useState}来自“React”；
从“/Text”导入文本；
从“/Heading”导入标题；
从“/getAccordion”导入getAccordion；
const Accordion=getAccordion（1）；
const accordionData=[
{
id:1，
内容：“这是第一个内容”
},
{
id:2，
内容：“这是第二个内容”
},
{
id:3，
内容：“这是第三个内容”
}
];
常量法线手风琴=（）=>{
常量[toggleValue，setToggleValue]=useState（-1）；
常量toggleHandler=（索引）=>{
setToggleValue（索引）；
};
返回(
{accordionData.map（（项目，索引）=>(
toggleHandler（索引）}
>
{toggleValue！==索引？`Expand`:`Shrink`}
{item.content}
))}
);
};
导出默认值；

这一行

{toggleValue！==index？`Expand`:`Shrink`}

会更改文本一次，但之后不会再更改标题（Expand/Shrink）

---

请帮助我实现基于相应单击在展开和收缩之间切换文本的结果。

如果项目已单击，则应重置

切换值

：

  const toggleHandler = (index) => {

    index===toggleValue?setToggleValue(-1): setToggleValue(index);
  };

然后使用条件渲染当前内容：

<Text>{toggleValue === index && item.content}</Text>

---

您应该使用布尔值，因为手风琴可以有2个值

想法：

• 创建一个独立的Accoursion组件，该组件定义展开/折叠行为
• 创建一个调用此组件的包装器视图组件
• 将数据作为道具从此视图传递，而不是使用本地硬编码对象

这种方法的好处是，您有两个仅在道具上工作的模块化组件。这些可以稍后导出到它们自己的独立库中

理想情况下，组件应该是哑的，并且应该只知道它自己基于状态和道具的行为

• 会计成分变化

const[toggleValue，setToggleValue]=useState（false）；
常量toggleHandler=（）=>{
setToggleValue（！toggleValue）；
};

• 手风琴视图更改

const AccordionView=（{accordionData}）=>{
返回(
{accordionData.map（（项）=>(
))}
);
};

• 常量：我创建了一个名为Constants的文件夹，它将保存硬编码对象，然后使用

  index.js

export const accordionData=[{
id:1，
内容：“这是第一个内容”
},
{
id:2，
内容：“这是第二个内容”
},
{
id:3，
内容：“这是第三个内容”
}
];

• index.js中的更改

从“../constants/accordion data”导入{accordionData}
...

Yiu必须使用state来说明每个标题状态项。这将一次对所有手风琴进行更改。。但是我需要将解决方案单独应用于手风琴。我正要为此更新我的asnwer。请给我几分钟时间更新它。你能检查一下沙箱吗？它给我错误，因为

无法读取未定义的属性“map”

。我需要对

常量进行哪些更改？我点击了上面更新的沙盒链接，它抛出了上面提到的错误。我没有尝试对我的代码进行任何更改。。我试着单独运行你的沙箱，但它本身给了我错误。。你能以匿名模式打开沙箱并确认它是否工作吗？我可以看到一个常量文件夹，但那里的文件是空的。。不确定您所做的更改是否已保存。请您也提供codesandbox示例，因为如果我们继续切换不同手风琴的标题，我发现文本没有以正确的方式更改。你的解决方案在这里。。请帮助我仅在各自的手风琴关闭时显示展开，在打开时显示收缩。您可以检查我简化了文本组件代码，并添加了条件呈现
{toggleValue===index&&item.content}
这是我预期的工作方式，感谢您的解决方案..不客气，如果我在正在开发的模板中使用该组件，您会怎么想？是的，当然，我不介意。。您可以在项目中使用该组件。。
<div style={{ ...this.props.style }}>
        <div className={`content ${this.props.text ? "open" : ""}`}>
          {this.props.children}
        </div>
      </div>