2

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

4

2 回答 2

1

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

于 2019-10-29T06:45:43.493 回答
1

我为这个问题找到了一个不同的解决方案，这对我的目的来说效果很好，但可能有点老套，当然可以改进。这个想法只是将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;

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

于 2019-10-29T09:36:30.117 回答