Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use the conditional rendering mechanism in Component". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the conditional rendering mechanism in Component.

SAP UI5 web Component also defines two chart tags, BarChart and LineChart:

The runtime effect is as follows:

Now I want to do a conditional display for these two chart controls, that is, click on the screen once, display A chart, and then click to display B chart.

(1) introduce useState function:

Use this useState to generate a set of controllers, and the returned values are saved through toggerCharts and setToggerCharts.

The former is an array, the value is the default display of the chart type: lineChart, the latter is a function.

In the handleHeaderClick event response function, change the chart type according to the click.

(2) in the card body, the display of the chart is controlled by the syntax of ternary expressions similar to Java:

The final effect is as follows:

Thank you for reading, the above is the content of "how to use the conditional rendering mechanism in Component". After the study of this article, I believe you have a deeper understanding of how to use the conditional rendering mechanism in Component, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.