Как создать кнопки, которые будут показывать / скрывать состояние всех подробных тегов в проекте Docusaurus? - PullRequest
Новая
       39

Как создать кнопки, которые будут показывать / скрывать состояние всех подробных тегов в проекте Docusaurus?

1 голос
/ 29 октября 2019

Исходя из обсуждения здесь и здесь , я хотел бы создать две кнопки, которые будут отображать / скрывать состояние всех подробных тегов в проекте 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 ]

0 голосов
/ 29 октября 2019

Я пришел к другому решению этой проблемы, которое отлично подходит для моих целей, но может быть немного хакерским и, безусловно, может быть улучшено. Идея состоит в том, чтобы просто разделить 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;

Не стесняйтесь редактировать этот пост, если у вас есть идея получше.

0 голосов
/ 29 октября 2019

Я подозреваю, что вы используете Docusaurus версии 1, и на стороне клиента не происходит React. Docusaurus 1 производит только статический HTML. Вместо этого попробуйте v2 :) https://v2.docusaurus.io/ это невероятно быстро и должно решить вашу проблему

...