如何在React项目中打开/关闭所有HTML详细信息标签？

Question

我正在使用Docusaurus，并想添加一个功能来打开我的网站的javascript页面中的所有HTML详细信息标签：“ detailtags.js”。我以为是正确的脚本（“ module.js”）。我知道此文件是通过Docusaurus的“ siteConfig.js”导入到detailtags.js中的。我的其他脚本也可以使用此方法正常工作。但是，我无法执行OpenAll()详细信息标签功能。

module.js

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

detailtags.js

const React = require('react');

class detailtags extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return <details>
        <summary>
            <p>1</p>
        </summary>
    </details>
    <details>
        <summary>
            <p>2</p>
        </summary>
    </details>
    <a href="#" onclick="OpenAll()">Open Details</a>
  }
}

module.exports = detailtags;

我曾尝试将<a href="#" onclick="OpenAll()">Open Details</a>插入网站的通用Footer.js，但同样会出现同样的问题。我知道有些事情超出了范围，我认为这与将函数插入代码的位置或如何插入代码有关，但是我缺乏经验，尤其是对React和特别是Docusaurus，解决此问题之外的问题。该解决方案曾经用于我的简单Web项目。