SAP UI5 web Component里的条件渲染机制

我的SAP UI5 web Component同时定义了两个图表标签,即BarChart和LineChart:



SAP UI5 web Component里的条件渲染机制

运行时效果如下:



SAP UI5 web Component里的条件渲染机制

现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表,再点击,显示B图表。


(1) 引入useState函数:


SAP UI5 web Component里的条件渲染机制


使用该useState生成一组控制器,返回的值通过toggerCharts和setToggerCharts保存。


SAP UI5 web Component里的条件渲染机制


前者是一个数组,值为默认显示的图表类型:lineChart,后者是一个函数。


SAP UI5 web Component里的条件渲染机制


在handleHeaderClick这个事件响应函数里,根据点击更改图表类型。


(2) 在card正文里,通过类似Java的三元表达式的语法来控制图表的显示:

SAP UI5 web Component里的条件渲染机制



最后效果如下:


SAP UI5 web Component里的条件渲染机制


上一篇:CRM WebClient UI里Sales area的保存原理


下一篇:如何使用SAP UI5 web Component的React框架的柱状图和折线图