React-如何更改当前单击项目的手风琴标题文本 想法：

问题描述

我正在制作一个简单的Reactjs手风琴应用程序，其中每个项目都可以折叠和展开。

要求：

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

如果我们单击任何一项，则内容将显示出来，在这种情况下，文本会更改为“收缩”，因为手风琴被打开了，因此为收缩手风琴指定了“收缩”标题。

完整的工作示例：

https://codesandbox.io/s/react-accordion-forked-lcyr0

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

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;

此行{toggleValue !== index ? `Expand` : `Shrink`}仅更改一次文本，但是此后在进一步切换标题（扩展/收缩）时，它没有进行任何更改。

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

解决方法

如果已单击toggleValue，则应将其重置：

  const toggleHandler = (index) => {

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

然后使用条件呈现当前内容：

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

并将Text组件简化为此：

<div style={{ ...this.props.style }}>
        <div className={`content ${this.props.text ? "open" : ""}`}>
          {this.props.children}
        </div>
      </div>

,

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

想法：

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

此方法的好处是您有2个仅可在道具上使用的模块化组件。这些可以稍后导出到自己的独立库中。

理想情况下，组件应该是愚蠢的，并且仅应根据状态和道具知道其自身的行为。

Updated sandbox

• Accoirdion组分发生变化

const [toggleValue,setToggleValue] = useState(false);

const toggleHandler = () => {
  setToggleValue(!toggleValue);
};

• 手风琴视图发生变化

const AccordionView = ({ accordionData }) => {
  return (
    <div>
      {accordionData.map((item) => (
        <NormalAccordion content={item.content} />
      ))}
    </div>
  );
};

• 常量：我创建了一个名为常量的文件夹，该文件夹将容纳硬编码的对象，然后使用来自index.js的道具传递给它

export 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"
  }
];

• index.js中的变化

import { accordionData } from '../constants/accordion-data'

...

<NormalAccordion accordionData={ accordionData } />