Question

我正在尝试使用React创建一个手风琴组件，但是动画无法正常工作。

我认为，基本思路是非常标准的，我给每个项目主体一个max-height中的一个0，这受向元素添加show类的影响。我可以选择并显示所需的项目，但是滑入/滑出的动画不起作用。

在打开Chrome开发工具的情况下，当我单击其中一项时，我可以看到整个“手风琴”元素正在闪烁，这使我相信整个元素都在重新渲染。但是我不确定为什么会这样。

以下是相关的Accordion组件：

import React, { useState } from "react";

const Accordion = ({ items }) => {
  const [selectedItem, setSelectedItem] = useState(0);

  const AccordionItem = ({ item, index }) => {
    const isOpen = index === selectedItem;
    return (
      <div className="accordion-item">
        <div
          onClick={() => {
            setSelectedItem(index);
          }}
          className="accordion-header"
        >
          <div>{item.heading}</div>
        </div>
        <div className={`accordion-body ${isOpen ? "show" : ""}`}>
          <div className="accordion-content">{item.body}</div>
        </div>
      </div>
    );
  };

  return (
    <div className="accordion">
      {items.map((item, i) => {
        return <AccordionItem key={i} item={item} index={i} />;
      })}
    </div>
  );
};

export default Accordion;

这是一个说明问题的codepen：

https://codesandbox.io/s/heuristic-heyrovsky-xgcbe

Answer 1

当然，它会重新渲染。每当您呼叫 setSelectedIem 时，状态都会发生变化，因此会对状态变化做出重新渲染以显示该变化。

现在，如果您放置此

const [selectedItem, setSelectedItem] = useState(0);

在“手风琴项目”中，它只会重新渲染手风琴项目，但会破坏您的功能。

当状态改变时，我的整个React组件是否会不必要地重新渲染？

1 个答案: