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

Question

根据讨论 and ，我想创建两个按钮来显示/隐藏 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;

如果您有更好的想法，请随时编辑此 post。

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

How to create buttons that will show / hide the state of all detail tags in a Docusaurus project?

javascript

html

reactjs

docusaurus