javascript - 反応コンポーネントのすべての詳細タグから「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"
],

上記の詳細タグから「open」属性を追加または削除する 2 つの関数:

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

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

他の関数は問題なく動作しているため、メイン スクリプト ファイルの 2 つの関数が を介してインポートされていることがわかっていますsiteConfig.js。サンプル ページからわかるように、OpenAll/機能を開始するボタン タグは、他の詳細タグと共にCloseAll内にあります。div

私の方法は良いと思いましたが、どちらのボタンも意図した効果をもたらしません。これは、関数のスコープまたは現在の設定に関係があると思われます (「Create React App」に似た Docusaurus を使用しています)。私は、このようなプロジェクトのために何か特別なことをしたとは思いません。フィードバックをお待ちしております。