Conditional Rendering - DingTalk Help Center

You may want a component to render only under certain conditions, similar to the following approach in React. YiDA provides a Render Condition setting that lets you easily control component visibility through variable binding:

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

Configure

Every component has a Render Condition property in its Premium settings, which controls the conditional rendering of the component. The default render condition is true. Typically, you use variable binding to set the render condition.

A component with a configured render condition displays a branch icon in the Outline tree, indicating that the Render Condition property has been set.

Use Cases

The following simple example demonstrates how to use conditional rendering. Control the visibility of a text component through URL parameters. When the showName parameter is present in the URL, the component is displayed; otherwise, it is hidden. Configure it as follows:

Set the text component’s Render Condition property using variable binding.
Bind the global variable state.urlParams.showName to the text component’s Render Condition property to determine whether the text component renders based on the URL parameter.

Finally, control the display of the text component by setting the showName parameter on the preview page as shown below. You can open the preview page directly in the browser by clicking Open in New Window in the upper-right corner of the preview page to configure its parameters:

URL without the showName parameter:
URL with the showName parameter: