如何在 Docusaurus 项目中使用带有配置道具的 useState() 挂钩？

Question

我正在使用 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;

我在此 question 中显示了另一段工作代码，但它使用不同的设置，其中使用 const {useState} = React; 代替 const React = require("react"); 和 <div id="root"> 用 ReactDOM.render(<SamplePage/>, document.getElementById("root")); 代替 module.exports = SamplePage;。我知道这允许在 SE 上使用运行代码片段，但它没有告诉我导入和导出应该如何在此 Docusaurus 项目的上下文中运行。我想要做的是将代码段合并到 React.Component 中，或者以其他方式构造此组件以使用 useState 钩子和配置道具，以便断言或拒绝 3 的 isOpen 属性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;

当然，这会引发 "invalid hook call"，因为在我当前的设置中我实际上无法使用 useState 挂钩。我在所有其他构造中得到意外的标记和引用错误。

Answer 1

你需要在你的 onClicks 中翻转你是 true/false bool（open 应该是 true）

请记住，您的 'open' onClick 可以很好地打开下拉菜单，但是 'close' onClick 只会在 'open' onClick 首先将状态设置为真

如果您需要将其导出而不是将其渲染到 DOM（并且不能t/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>

Answer 2

我认为您将对象解构与导入混淆了。以下是您应该做的事情的细目分类：

// 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 关键字，只需自行调用它即可。

如何在 Docusaurus 项目中使用带有配置道具的 useState() 挂钩？

How to employ the useState() hook with config props in a Docusaurus project?

html

javascript

reactjs

docusaurus