如何在反应打字稿中更改数组中的图标

Question

我正在尝试创建手风琴，当您单击它时它会向下滑动并更改图标

这是我在 App.tsx 中的以下代码：

const accordionList = [
  {
    title: "Horses can..."
    icon: "",
    pointer: ""
  },
  {
    title: "Rhino skin maybe.."
    icon: "",
    pointer: ""
  },
  {
    title: "If you looking..."
    icon: "",
    pointer: ""
  }
]

function App() {
  const [icon, setIcon] = useState([''])
  const toggleAccordion = (accordion: any, index: any) => {
    const iconRotate = [...accordion.pointer];
    iconRotate[accordion.pointer] = '';
    setIcon(iconRotate[accordion.pointer])
    accordion.pointer = icon;

  }

  
  return (
    <div className="App">
      <div className="App-header">
        {accordionList.map((accordion, index) => (
          <ul className="accordion-list" key={index}>
            <div className="accordion-item">
              <button onClick={() => toggleAccordion(accordion, index)}>{accordion.icon} {icon} </button>
              <Accordion accordion={accordion} />
            </div>
          </ul>
        ))}
      </div>
    </div>
  );
}

export default App;

这是我在 Accordion.tsx 中的以下代码：

interface Props {
  accordion: { title: string, icon: string;}
}

export const Accordion: React.FC<Props> = (props) => {

  const { accordion } = props;

  return (
      <div>
        {accordion.title}
      </div>
    )
};

现在我的 toggleAccordion 函数在点击时没有改变图标。如何改进我的功能？

指向对象数组的更新指针

Answer 1

根据我对您要完成的工作的理解，要更改图标，您只需要更新 icon 状态而不是更新 accordionList.pointer 内的指针并维护此图标您拥有的图标列表中所有项目的状态。我建议您将手风琴项目分成自己的组件，图标状态如下：

App.js 文件：

const accordionList = [
  {
    title: "Horses can..."
    icon: "",
    pointer: ""
  },
  {
    title: "Rhino skin maybe.."
    icon: "",
    pointer: ""
  },
  {
    title: "If you looking..."
    icon: "",
    pointer: ""
  }
]

function App() {
  return (
    <div className="App">
      <div className="App-header">
        {accordionList.map((accordion, index) => (
          <ul className="accordion-list" key={index}>
            <AccordionItem accordion={accordion}/>
          </ul>
        ))}
      </div>
    </div>
  );
}

export default App;

AccordionItem 组件：

function AccordionItem({accordion}) {
  const [indicatorIcon, setIndicatorIcon] = useState('')
  const toggleAccordion = () => {
     setIndicatorIcon('');
  }
  return (
    <div className="accordion-item">
        <button 
         onClick={() => toggleAccordion(accordion, index)}
        >{accordion.icon} {icon} </button>
        <Accordion accordion={accordion} />
    </div>
  );
}

export default App;

您可以保持 Accordion 不变。这将分离您的关注点，帮助您只需要关心 AccordionItem 的状态，这将消除任何不必要的复杂数组操作。

如何在反应打字稿中更改数组中的图标

How to change icon in an array in react typescript

javascript

typescript

reactjs

react-hooks

react-typescript