Как использовать хук useState () с настройками конфигурации в проекте Docusaurus? - PullRequest
Новая
       54

Как использовать хук useState () с настройками конфигурации в проекте Docusaurus?

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

Я работаю с Docusaurus, который предоставляет siteConfig.js в качестве реквизита для конфигурации. Поэтому я должен использовать этот реквизит для создания компонентов моего сайта. Рабочий код отформатирован так: 

const React = require("react");

class SamplePage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return <div>{siteConfig.title}</div>;
  }
}

module.exports = SamplePage;

У меня есть другой сегмент рабочего кода, показанный в этом вопросе , но он использует другую настройку, где const {useState} = React; используется вместоconst React = require("react"); и <div id="root"> с ReactDOM.render(<SamplePage/>, document.getElementById("root")); вместо module.exports = SamplePage;. Я понимаю, что это позволяет запускать фрагменты кода на SE, но это не показывает мне, как должны работать импорт и экспорт в контексте этого проекта Docusaurus. То, что я хочу сделать, это включить сегмент кода в React.Component или иначе сконструировать этот компонент, чтобы использовать хук useState с реквизитами конфигурации, чтобы утверждать или отклонять атрибут isOpen 3 detail тегов, используя2 button (s) для управления ловушкой: 

const {useState} = React;

const SamplePage = () => {
    const [isOpen, setIsOpen] = React.useState(false); 

    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(false)}>Open All Details.</button>
            <button onClick={() => setIsOpen(true)}>Close All Details.</button>
        </div>
    );
  }

ReactDOM.render(<SamplePage/>, document.getElementById("root"));

Для фрагмента кода: 

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

Мой вопрос заключается в том, как объединить эти сегменты кода. Я пытался сконструировать этот компонент разными способами, но не могу заставить button (s) запускать эффект onClick(). Например, я попытался: 

const React = require("react");

const SamplePage, {useState} = () => {
  const [isOpen, setIsOpen] = React.useState(false); 
  const siteConfig = this.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(false)}>Open All Details.</button>
          <button onClick={() => setIsOpen(true)}>Close All Details.</button>
      </div>
  );
}

module.exports = SamplePage;

Это, конечно, вызывает «недопустимый вызов перехвата», поскольку я не могу фактически использовать перехват useState в моей текущей установке. Я получаю неожиданные токены и ссылочные ошибки во всех других моих конструкциях.

Ответы [ 2 ]

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

Я думаю, что вы смешиваете разрушение объектов с импортом. Вот описание того, что вы должны делать: 

// this line imports the react library, which we need in order to
// export a JSX component
const React = require("react");

// this line pulls the useState function out of the React library
// using object destructuring
const { useState } = React;
// it is the same as const useState = React.useState

// we dont need to pass useState in as a prop because its already
// imported in the same file
const SamplePage = props => {
  // and here we don't need to call React.useState because it has been
  // separated into its own variable
  const [isOpen, setIsOpen] = useState(false); 
  const siteConfig = props.config; // functional components don't use this

  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(false)}>Open All Details.</button>
          <button onClick={() => setIsOpen(true)}>Close All Details.</button>
      </div>
  );
}

module.exports = SamplePage;

дайте мне знать, если у вас есть еще вопросы.

РЕДАКТИРОВАТЬ

Я добавилпараметр props для функции, я случайно пропустил это. Кроме того, при использовании функциональных компонентов вы не используете ключевое слово this при доступе к реквизиту, просто вызывайте его самостоятельно.

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

Вам нужно перевернуть, что вы правы / ложны в ваших кликах onClicks (open должно быть true)

Имейте в виду, что ваш 'open' onClick открывает выпадающие списки просто отлично, но "закрывается"'onClick закроет раскрывающиеся списки, только если' open 'onClick сначала установит состояние в true

Если вам нужно экспортировать это вместо рендеринга в DOM (и не можете / donне хотите переходить на операторы импорта ES6 в другом месте), затем измените ReactDom.render() на: 

module.exports = SamplePage;

Полный пример: 

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;

Выполненный фрагмент:

// const React = require('react')
const {useState} = React; //refer to above note

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>
    );
  }

ReactDOM.render(<SamplePage/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>
...