javascript - 如何在 Docusaurus 项目中使用带有配置 props 的 useState() 钩子(Hook)？

Question

我正在与 Docusaurus 合作，它提供 siteConfig.js作为配置 Prop 。因此，我必须使用这个 Prop 来构建我的网站组件。工作代码的格式如下:

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与配置属性 Hook 以断言或拒绝 isOpen 3 detail 的属性标签，使用 2 button (s) 控制钩子(Hook):

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;

这当然会引发“无效的钩子(Hook)调用”，因为我实际上无法使用 useState Hook 我当前的设置。我在所有其他结构中都遇到了意外的标记和引用错误。

Answer 1

您需要在 onClicks 中翻转 true/false bool(open 应该为 true)

请记住，您的“打开”onClick 可以很好地打开下拉菜单，但“关闭”onClick 仅在“打开”时才会关闭下拉菜单onClick 首先将状态设置为 true

如果您需要导出它而不是将其渲染到 DOM(并且不能/不想在其他地方更改为 ES6 import 语句)，则将 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>