React：HTML 详细信息在开始打开时无法控制地切换

Question

我正在尝试使用 HTML<details>标签结合 React 使用语义 html 创建一个简单的可扩展部分。

这种<details><summary></summary></details>行为开箱即用，对于我的 1-2% 使用 IE 用户的用户来说，他们不了解内容的显示隐藏性质，这确实不是内容的世界末日。暂时总是显示。

当使用 React hooks 来控制<details>面板是打开还是关闭时，我的问题就出现了。React组件的基本布局如下：

const DetailsComponent = ({startOpen}) => {
  const [open, toggleOpen] = useState(startOpen);

  return (
    <details onToggle={() => toggleOpen(!open)} open={open}>
      <summary>Summary</summary>
      <p>Hidden content hidden content hidden content</p>
    </details>
  );
};

我需要使用该事件的原因onToggle是更新open状态变量以触发我的实际示例中的其他一些 JavaScript。我使用startOpenprop 来决定是否在页面上渲染详细信息窗格是打开还是关闭。

当我将组件用作 时，会发生预期的行为<DetailsComponent startOpen={ false } />。

然而，当想要在加载时打开窗格时（<DetailsComponent startOpen={ true } />），我可以明显地看到窗格一次又一次地非常快速地打开和关闭。

Answer 1

我认为你应该使用 prevState

<details onToggle={() => toggleOpen(prevOpen => !prevOpen )} open={open}>