學習 javascript 后，我??開始學習 React，但我不太確定 DOM 操作在 React 中是如何作業的，例如，我想更改 React 中的背景顏色，它是類似于 Javascript 還是完全不同的東西？
const onClick = () =>{
document.body.style.backgroundColor = 'Dodgerblue';
}
return (
<div>
<button onClick={onClick}>Change background Color</button>
</div>
)
}```
uj5u.com熱心網友回復：
雖然您的案例場景作業正常，因為您在函式中選擇了一個元素，但 React 中可能發生的問題是，如果您嘗試選擇一個即將呈現的元素（但尚未呈現）將回傳null值因為選擇器方法不會回傳任何元素/節點。
示例代碼：
...
const selectText = document.getElementById("testDOM");
const faultyFunction = () => {
selectText.style.color = "red";
} //Calling this function throws TypeError: Cannot read properties of null (reading 'style')
const onClick = () =>{
const selectText = document.getElementById("testDOM");
selectText.style.color = "red";
} //This works as expected,
//as the function is selecting an element once the DOM has been rendered
return (
<div>
<button onClick={onClick}>Change Text Color</button>
<br/>
<button onClick={faultyFunction}>Faulty Button</button>
<p id="testDOM">Random Text</p>
</div>
)
...
uj5u.com熱心網友回復：
當然會，因為 react 是基于 JavaScript 和 html 的，所以這應該可以正常作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/533101.html