在反應中工作，我試圖讓我的組件在做出選擇之前不顯示。做出選擇后，我需要設置其他樣式，如下所示：<p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>在選擇完成之前，我不想顯示任何內容；截至目前，雖然 player 是 undefined 條件仍然運行，但我得到一個空邊框。我可以使用任何快速技巧來檢查 player 對象是否為 undefined 并且不渲染任何內容，然后按照我的方式渲染做出選擇后您愿意嗎？
3 回答
精慕HU
TA貢獻1845條經驗 獲得超8個贊
您可以檢查player：
{player?&&?<p?className={player.weight?>=?opponent.weight???"text-green?border-green"?:?"text-danger?border-danger"}>{player.weight}</p>}此語法variable && something相當于if(variable){ something }
因此，如果?variable?是一個?falsy?值，例如?null、undefined、< /span>不執行。0，則something
它非常適合 React 中的條件渲染語法
鳳凰求蠱
TA貢獻1825條經驗 獲得超4個贊
你可以使用這樣的東西
<div style={{ display: myVar ? 'block' : 'none' }}>
<p>your data ...</p>
</div>
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
在 React 中，有一個 render 方法，如果你不希望它渲染，你可以返回 null。
例如
render() {
const { player } = this.props;
if (!player) return null;
return (
<p className={
player.weight >= opponent.weight ?
"text-green border-green" : "text-danger border-danger"}>
{player.weight}
</p>
)
}
或者你可以做第一個海報所做的事情
{player && <p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>}
如果 player 為假（null、false、未定義），則 && 后面的部分將被刪除。條件不會執行，因為第一部分已經是假的。
一個&& b - 此處如果 a 不是 b 將不會執行，因為兩者都給出相同的 false 響應。在下面的情況下，如果 a = false，那么 B 是什么并不重要，因為表達式始終為 false。因此，react不會執行html部分（相當于b）
false && true
false && false
- 3 回答
- 0 關注
- 209 瀏覽
添加回答
舉報
0/150
提交
取消