我的SAP UI5 web Component同時(shí)定義了兩個(gè)圖表標(biāo)簽，即BarChart和LineChart:

運(yùn)行時(shí)效果如下：

現(xiàn)在我想針對(duì)這兩個(gè)圖表控件做一個(gè)條件顯示，即點(diǎn)擊屏幕一次，顯示A圖表，再點(diǎn)擊，顯示B圖表。

(1) 引入useState函數(shù)：

使用該useState生成一組控制器，返回的值通過(guò)toggerCharts和setToggerCharts保存。

前者是一個(gè)數(shù)組，值為默認(rèn)顯示的圖表類型：lineChart，后者是一個(gè)函數(shù)。

在handleHeaderClick這個(gè)事件響應(yīng)函數(shù)里，根據(jù)點(diǎn)擊更改圖表類型。

(2) 在card正文里，通過(guò)類似Java的三元表達(dá)式的語(yǔ)法來(lái)控制圖表的顯示：

最后效果如下：

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 web Component里的条件渲染机制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。