ReactJS：如何以编程方式打开 Material-UI 手风琴？

Question

手风琴都有一个 id：

const CategoryDisplay: React.FC<Props> = (props) => {
...
  return (
    <>
      <Accordion
        id={`category-${accordion.id}`}/>
    </>
  );
};

export default CategoryDisplay;

我有一个 function 通过链接中的 hash 值找到一个带有 id 的特定 Accordion 并滚动到它：

useLayoutEffect(() => {
  const anchor = window.location.hash.split("#")[1];
  if (anchor) {
    const anchorEl = document.getElementById(anchor);
    if (anchorEl) {
      anchorEl.scrollIntoView();
    }
  }
}, []);

现在我还想扩展那个特定的手风琴。 我如何 go 关于这个 Material-UI 手风琴？ 我必须以某种方式在 anchorEl 上设置扩展。

Answer 1

手风琴expanded道具。 将其设置为true并且 Accordion 将展开：

const CategoryDisplay: React.FC<Props> = (props) => {
const [expand, setExpand] = useState(new Array(numberOfAccordions).fill(false)) 
...
  return (
    <>
      <Accordion
        id={`category-${accordion.id}`} expanded={expand[accordion.id]}/>
    </>
  );
};

export default CategoryDisplay;

useLayoutEffect((accordionId) => {
  const anchor = window.location.hash.split("#")[1];
  if (anchor) {
    const anchorEl = document.getElementById(anchor);
    if (anchorEl) {
      let result = [...expand];
      result[accordionId] = true;
      setExpand(result);
      anchorEl.scrollIntoView();
    }
  }
}, []);