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

IT技术 javascript html reactjs docusaurus
2021-04-29 01:20:55

根据此处和此处的讨论，我想创建两个按钮，用于显示/隐藏 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 在后台做了一些愚蠢和固执己见的事情，这会干扰这个简单的功能。这个问题的根源是什么，如何解决？

2个回答

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

我找到了一个不同的解决方案来解决这个问题，它对我的​​目的来说很好用，但可能有点笨拙，当然可以改进。这个想法只是将 分成SamplePage两个相同的module：SamplePageAand SamplePageB，唯一的区别是useState()布尔值。因此，实际上，您只需要 2 个链接即可将所有明细标签从打开状态切换到关闭状态。当然，这需要对module进行无意义的复制，但这是我知道的唯一实现预期效果的解决方案。

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;

如果您有更好的想法，请随时编辑这篇文章。

其它你可能感兴趣的问题
上一篇如何映射具有未知嵌套级别的数组？ 下一篇表单提交 ReactJS 上的“类型错误：尝试获取资源时出现网络错误”