Conditional Rendering

Sometimes we want components to render only under certain conditions, similar to the following syntax in React. Yida provides a Whether to Render configuration option, which allows us to easily control the visibility of components by binding variables:

function HelloText({showName, name}) {
	return (
  	<div>
    {showName && (<span>{name}</span>)} // Determine whether to display the name text component based on showName
    </div>
  );
}

Configuration

In the advanced property settings of each component, there is a Whether to Render property used to control conditional rendering of the component.

By default, the configuration value for whether to render is true. We usually use variable binding to set the whether to render property.

tip

Components with the whether to render configuration will show a small branch icon in the outline tree to indicate that the component has the whether to render property set:

Usage Scenarios

Let's use a simple example to explain how to use conditional rendering.

We control the visibility of a text component through URL parameters. When the showName parameter exists in the URL parameters, it is displayed; otherwise, it is not displayed. The configuration is as follows:

• Set the whether to render property of the text component through variable binding:
• Bind a global variable state.urlParams.showName to the whether to render property of the text component to render the text component based on URL parameters:

Finally, we can control the display of the text component by setting the showName parameter in the preview page as shown below (we can click the Open in new window button in the upper right corner of the preview page to directly open the preview page in the browser and set parameters for it):

• URL without showName parameter:
• URL with showName parameter: