我有一个<details>标签，单击它可以切换一些内容。现在，<a>在它下面有一个标签，单击该<a>标签后，我想切换相同的内容，即单击<a>等效于单击<details>。这是我尝试过的代码片段：
import React, { useState } from "react";
import ReactDOM from "react-dom";
const Menu = ({ toggleDetails }) => {
return (
<div>
<a href="/#" onClick={toggleDetails}>
Open
</a>
</div>
);
};
const Details = (isOpen) => {
return (
<details>
<summary>Hello</summary>
{isOpen ? <div>Hi</div> : null}
</details>
);
};
const App = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleDetails = () => {
setIsOpen(isOpen ? false : true);
};
return (
<div>
<Details isOpen={isOpen} />
<Menu toggleDetails={toggleDetails} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("container"));
在单击“ Hello”时，它会切换“ Hi”。我想在单击“打开”时执行相同的操作，即切换“嗨”。我该怎么做？条件渲染不起作用。我应该使用ref来访问<details>标签的'open'属性吗？
编辑：
我还尝试了以下ref解决方案，但没有成功：
const Details = (isOpen) => {
const detailsRef = useRef();
// detailsRef.current.open = isOpen
return (
<details ref={detailsRef}>
<summary>Hello</summary>
<div>Hi</div>
</details>
);
};
我假设您正在尝试使用details标签的本机切换功能。为此，您需要通过open属性控制打开/关闭状态。然后，您应该使用该onToggle事件来检测何时单击了summary元素，以便可以使组件的状态与实际DOM保持同步。
const Menu = ({ setIsOpen }) => {
return (
<div>
<a
href="#"
onClick={() => {
setIsOpen((prev) => !prev);
}}
>
Open
</a>
</div>
);
};
const Details = ({ isOpen, setIsOpen }) => {
return (
<details
open={isOpen}
onToggle={(event) => {
setIsOpen(event.target.open);
}}
>
<summary>Hello</summary>
<div>Hi</div>
</details>
);
};
const App = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<Details isOpen={isOpen} setIsOpen={setIsOpen} />
<Menu setIsOpen={setIsOpen} />
</div>
);
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句