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

Question

我有一个包含使用多个 detail/summary 标签的 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 功能的按钮标签与其他详细标签位于 div 内。

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

Answer 1

使用状态将属性设置为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;

Answer 2

我必须使用 useEffect 才能让它工作。

  const closeDetails = () => {
    console.log('click')
    setIsOpen(false)
  }

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

How to add or remove the "open" attribute from all details tags in a react component?

javascript

html

reactjs

docusaurus