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

在讨论here和here之后，我想创建两个按钮来显示/隐藏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切换到false无关。

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

最佳答案

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