我在 React 作業。我在陣列上有一個 map() 函式，它為陣列中的每個物件創建一個 div 并為其分配一個 id：
{squares.map((element) => {
return (
<div key={element} id={element} className="square">
{element}
</div>
);
我還創建了一個函式來通過 id 選擇一個 div 并為其著色：
const colorRed = () => {
document.getElementById("1").style.backgroundColor = "red";
};
如果我呼叫該函式，它會回傳一個錯誤，因為 document.getElementById("1") 為空，因為起初沒有這樣的元素。
我嘗試用以下方法調節它：
{ document.getElementById("1") && colorRed()}
以便它僅在 getElement 為真時運行該函式。它有點作業，但僅限于第二個實體。地圖的第一次呈現（由按鈕單擊事件觸發）運行時沒有錯誤，但沒有紅色背景。
我如何加入這些函式，或者我應該在哪里呼叫 colorRed 函式，以便在創建該 id 的元素時立即應用它？
順便說一句，最終目標是將影像插入到 div，而不是為其著色。但是 appendChild 根本不起作用，所以我首先要嘗試立即獲取該元素。
我嘗試在創建元素時選擇它并將其著色為紅色。當我用 && 調節它時，它起作用了，但只在第二次呈現時起作用，之后每次都起作用。
完整的代碼：
function App() {
const [squares, setSquares] = useState([]);
const shuffleSquares = () => {
const nowShuffledSquares = [...squaresValue].sort(
() => Math.random() - 0.5
);
setSquares(nowShuffledSquares);
};
const colorRed = () => {
document.getElementById("1").style.backgroundColor = "red";
};
return (
<div className="container">
<div className="btn-container">
<button className="shuffle" onClick={shuffleSquares}>
shuffle
</button>
</div>
<div className="board-container">
<div className="board">
{squares.map((element) => {
return (
<div key={element} id={element} className="square">
{element}
</div>
);
})}
</div>
</div>
</div>
);
}
export default App;
uj5u.com熱心網友回復：
已編輯
我已經測驗了useRef()代碼，它似乎對我有用。
我制作了這個代碼 sanbox 示例
onLoad是我的錯嗎，它似乎只適用于<img />
您也可以簡單地在 style 道具上使用條件：
<div
key={element}
id={element}
className="square"
style={{backgroundColor: element === 1 ? 'red' : ''}}
{element}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/533682.html