显示阻止来自 React 中另一个组件的显示无元素 onclick答案

【问题标题】：Display block a display none element onclick from another component in React显示阻止来自 React 中另一个组件的显示无元素 onclick
【发布时间】：2023-01-04 22:27:16
【问题描述】：

我想要一个按钮单击要显示在屏幕上的窗口。

我试图将 id 窗口放入一个变量中，但它的值为 null。第一次成功。

我必须使用道具吗？如何？或者把窗口变量放在哪里？

该项目的 GitHub 链接： https://github.com/folza1/react-modulzaro-question

import "./App.css";

const window = document.getElementById("window");
console.log(window);
window.style.display = "none";

function Window() {
  return (
    <>
      <div id="window"></div>
    </>
  );
}

function Div() {
  return (
    <>
      <div className="divStyle">
        <button
          id="button"
          onClick={function () {
            window.style.display = "block";
          }}
        >
          DETAILS
        </button>
      </div>
    </>
  );
}

function App() {
  return (
    <>
      <h1>Products</h1>
      <div id="main">
        <Div />
        <Window />
      </div>
    </>
  );
}

export default App;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

试试这个代码：

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }```


also you can handle it with useState:
const [toggle, setToggle] = useState(false)

into return Div components :

  <button 
       onClick={() => setToggle(!toggle)} >
       Toggle 
  </button>


function App() {
  return (
    <>
      <h1>Products</h1>
      <div id="main">
        <Div />
        <Window />
      {toggle && (
         <Window />
      )}
      </div>
    </>
  );
}
export default App;

【讨论】：