Question

在讨论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在后台做一些愚蠢而固执己见的事情，干扰了这种简单的功能。这个问题的根源是什么？如何解决？

Answer 1

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

Answer 2

我针对此问题提出了另一种解决方案，该解决方案可以很好地实现我的目的，但可能有点笨拙，而且肯定可以改进。这个想法只是将SamplePage分为两个相同的模块：SamplePageA和SamplePageB，唯一的区别是useState()布尔值。因此，实际上，您仅需要2个链接即可将所有详细信息标签从打开状态切换到关闭状态。当然，这需要对模块进行无意义的重复，但这是我所知道的达到预期效果的唯一解决方案。

const React = require('react')

const {useState} = React;

const SamplePageA = () => { // or SamplePageB;
    const [isOpen, setIsOpen] = useState(true); // or false

    return (
      <div id="test">
        <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>

        <a href="SamplePageA">Open All Details</a>
        <a href="SamplePageB">Close All Details</a>

      </div>
    );
  }

module.exports = SamplePageA; // or SamplePageB;

如果您有更好的主意，请随时编辑此帖子。

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

2 个答案: