我試圖在單擊按鈕時以編程方式隱藏 div。因此，我撰寫了以下代碼，但它不起作用（Div 仍然存在）：
import React, {useState} from 'react';
import './Button.css';
export function Button() {
const [click, setClick] = useState(false);
const hideDiv = () => {
var display = 'block';
if (click){
display = 'none';
setClick(false);
}else{
display = 'block';
setClick(true);
}
return ([
document.getElementById('main').style.display = {display}
])
};
return(
<button className='btn' onClick={() => setClick(true), hideDiv}>Some button!</button>
);
};
我用警報“除錯”了應用程式，正確的顯示即將到來，但似乎在將它應用到 div 樣式時我遺漏了一些東西。
我在這里錯過了什么？
uj5u.com熱心網友回復：
試試這個方法，
export function Button() {
const [display, setDisplay] = useState("block");
const hideDiv = () => {
setDisplay(display === "none" ? "block" : "none");
};
return (
<>
{display === "block" && <div>MY DIV</div>}
<button className="btn" onClick={hideDiv}>
Some button!
</button>
</>
);
}
CODESANDBOX - https://codesandbox.io/s/wizardly-water-kf0md?file=/src/App.js
uj5u.com熱心網友回復：
正如@dai 評論的那樣，您不應該直接與 React 內部的 DOM 互動（因為它實際上呈現了一個虛擬的）。
嘗試使用狀態代替，例如：
import React, {useState} from 'react';
import './Button.css';
export function Button() {
const [display, setDisplay] = useState(true);
const hideDiv = () => {
setDisplay(!display);
};
return (
<>
{display && (<div id='main'></div>)}
<button className='btn' onClick={hideDiv}>Some button!</button>
<>
);
};
如果要添加的 div 是其他組件，則應改用背景關系。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366459.html
上一篇：為什么即使我使用相對位置，bottom:0也不作業？
下一篇：嵌套子元素中的粘性元素