如何创建显示/隐藏 Docusaurus 项目中所有详细标签状态的按钮？

根据讨论here https://stackoverflow.com/questions/58579048/how-to-add-or-remove-the-open-attribute-from-all-details-tags-in-a-react-compo and here https://stackoverflow.com/questions/58598000/how-to-employ-the-usestate-hook-with-config-props-in-a-docusaurus-project，我想创建两个按钮来显示/隐藏 Docusaurus 项目中所有详细标签的状态。

目前，我拥有的最佳候选代码如下：

const React = require('react')
const {useState} = React;

const SamplePage = (props) => {
    const [isOpen, setIsOpen] = useState(false); 
    const siteConfig = props.config

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
                <p>testing</p>
            </details>

            <button onClick={() => setIsOpen(true)}>Open All Details.</button>
            <button onClick={() => setIsOpen(false)}>Close All Details.</button>
        </div>
    );
  }

module.exports = SamplePage;

Docusaurus 服务器加载此页面完全正常，但按钮没有onClick影响。这与我是否切换button布尔值来自true to false.

从前面的答案可以看出，这个构建的代码片段工作得很好。然而，我相信 Docusaurus 在后台做了一些愚蠢且固执己见的事情，这干扰了这个简单的功能。这个问题的根源是什么？如何解决？

我怀疑您使用的是 Docusaurus 版本 1，并且那里没有发生客户端 React。 Docusaurus 1 仅生成静态 HTML。试试 v2 :)https://v2.docusaurus.io/ https://v2.docusaurus.io/它速度快得多，应该可以解决您的问题