首頁(yè) 猿問(wèn) 如何使組件“顯示：無(wú)&...

如何使組件“顯示：無(wú)”直到用戶(hù)做出選擇？

Html5

千巷貓影 2023-12-19 16:43:17

在反應(yīng)中工作，我試圖讓我的組件在做出選擇之前不顯示。做出選擇后，我需要設(shè)置其他樣式，如下所示：<p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>在選擇完成之前，我不想顯示任何內(nèi)容；截至目前，雖然 player 是 undefined 條件仍然運(yùn)行，但我得到一個(gè)空邊框。我可以使用任何快速技巧來(lái)檢查 player 對(duì)象是否為 undefined 并且不渲染任何內(nèi)容，然后按照我的方式渲染做出選擇后您愿意嗎？

查看完整描述

3 回答

精慕HU

TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以檢查player：

{player?&&?<p?className={player.weight?>=?opponent.weight???"text-green?border-green"?:?"text-danger?border-danger"}>{player.weight}</p>}

此語(yǔ)法variable && something相當(dāng)于if(variable){ something }

因此，如果?variable?是一個(gè)?falsy?值，例如?null、undefined、< /span>不執(zhí)行。0，則something

它非常適合 React 中的條件渲染語(yǔ)法

反對(duì) 回復(fù) 2023-12-19

鳳凰求蠱

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊

你可以使用這樣的東西

</div>

反對(duì) 回復(fù) 2023-12-19

拉丁的傳說(shuō)

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

在 React 中，有一個(gè) 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>

)

}

或者你可以做第一個(gè)海報(bào)所做的事情

{player && <p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>}

如果 player 為假（null、false、未定義），則 && 后面的部分將被刪除。條件不會(huì)執(zhí)行，因?yàn)榈谝徊糠忠呀?jīng)是假的。

一個(gè)&& b - 此處如果 a 不是 b 將不會(huì)執(zhí)行，因?yàn)閮烧叨冀o出相同的 false 響應(yīng)。在下面的情況下，如果 a = false，那么 B 是什么并不重要，因?yàn)楸磉_(dá)式始終為 false。因此，react不會(huì)執(zhí)行html部分（相當(dāng)于b）

false && true

false && false

反對(duì) 回復(fù) 2023-12-19