SAP UI5 Web Component for React的图标和图片处理

这个React应用左上角的react图标，以及右上角的小人图标，是如何显示出来的？

把图片放到React应用的public文件夹下：

在React应用的ShellBar组件里，将图片名称赋给对应的logo和profile属性即可：

运行时的实现：

假设我使用SAP UI5 Web Component的React控件， 比如柱状图和折线图：

导入useState函数，默认加载状态为false：

每次点击屏幕后，首先将Loading状态使用切换函数setLoading设置成true，这样可以看到控件正在加载的动画效果。2秒钟后，setLoading设置为false，关闭动画效果。

下图这道渐进式显示的横线就是控件加载时的动画效果。

最后把loading变量赋给两个Chart的loading属性：

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

运行时效果如下：

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

(1) 引入useState函数：

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

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

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

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

最后效果如下：