我正在 React js 中創建一個彈出視窗，并有一個基于布林值更改 id 的 divgameOver.winner
現在我已設定gameOver.winner為 true。
import React, { useContext } from 'react'
import { AppContext } from '../../../App'
import './GameOver.css'
const GameOver = () => {
const { currAttempt, setCurrAttempt, grid, setGrid, gameOver, setGameOver} = useContext(AppContext)
console.log(gameOver.winner)
return (
<div className="gameOver" ** id={gameOver.winner}> **
<div className="gameOverInner">
<h1>Game Over</h1>
<h2>{gameOver.winner ? "You Win!" : "You Lose!"} - {currAttempt.currRow}</h2>
</div>
</div>
)
}
export default GameOver
在GameOver.css我打電話給這個 id
.gameOver[id=true]{
top: 0;
left: 0;
width: 25%;
background-color: rgb(41, 41, 41);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
但是，我的輸出沒有樣式。
uj5u.com熱心網友回復：
如果gameOver.winner是布林值，那么它不會將<div id="true">節點輸出到 DOM。React 不接受內部 html 元素上的 id 屬性的布林值（您應該在瀏覽器控制臺中看到有關它的錯誤）。如果您想根據布林值為您的 div 添加特殊樣式，我建議您在gameOver.winner為 true 時為其添加一個類。
<div className={`gameOver ${gameOver.winner ? 'winner' : ''}`}>
然后在您的 css 檔案中，您可以使用 selector 定位它.gameOver.winner。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/454081.html
標籤：javascript css 反应