如何在反应组件中的所有详细信息标签中添加或删除“open”属性？

Question

我有一个带有 React 组件的页面，该组件使用多个详细/摘要标签：

const React = require("react");

class samplePage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return (

        <div>
            <details>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick="OpenAll()">Open All Details.</button>
            <button onClick="CloseAll()">Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;

我有一个全局siteConfig.js来配置我的脚本：

scripts: [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
],

使用 2 个函数在上述详细信息标签中添加或删除“open”属性：

function CloseAll() {
  $("details").removeAttr("open");
}

function OpenAll() {
    $("details").attr("open", "open");
}

我知道我的主脚本文件中的 2 个函数是通过 导入的siteConfig.js，因为我的其他函数运行没有问题。OpenAll从示例页面可以看出，启动/功能的按钮标签与其他详细标签一起CloseAll位于 a 内。div

我认为我的方法很好，但是这两个按钮都没有达到预期的效果。我怀疑这与函数范围或我当前的设置有关（我正在使用 Docusaurus，它有点类似于“Create React App”）。我认为我没有为这样的项目做过任何不寻常的事情。感谢任何反馈。

Answer 1

使用 state 将属性设置为true或false，就像这样。（请注意，您可以使用像这里这样的钩子，但也可以使用旧的state和setState。而且您不需要siteConfig或 那里定义的两个函数。

const React = require("react");

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

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick={() => setIsOpen(false)}>Open All Details.</button>
            <button onClick={() => setIsOpen(true)}>Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;