0

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

我在这个问题中显示了另一段工作代码，但它使用了不同的设置 where const {useState} = React;is used in place ofconst React = require("react");和<div id="root">with ReactDOM.render(<SamplePage/>, document.getElementById("root"));in place of module.exports = SamplePage;。我知道这允许在 SE 上运行代码片段，但它没有向我展示导入和导出应该如何在这个 Docusaurus 项目的上下文中运行。我想要做的是将代码段合并到React.Component或以其他方式构造此组件以使用useState带有配置道具的钩子来断言或拒绝3 个标签的isOpen属性，使用 2 (s) 来控制钩子：detailbutton

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在当前设置中使用挂钩。我在所有其他构造中都得到了意外的标记和引用错误。

4

2 回答 2

1

您需要在 onClicks 中翻转您的真/假布尔值（打开应该为真）

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

如果您需要将其导出而不是将其渲染到 DOM（并且不能/不想在其他地方更改为 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>

于 2019-10-28T20:44:37.477 回答
1

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

// 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参数添加到函数中，我不小心把它遗漏了。另外，在使用功能组件时，您在访问 props 时不使用this关键字，只需自己调用它即可。

于 2019-10-28T20:46:39.630 回答