条件渲染 - DingTalk Help Center

有时候我们希望组件在一定条件下才进行渲染，类似 React 中的下面的写法，宜搭提供是否渲染的配置项，通过绑定变量我们方便实现组件的显隐控制：

function HelloText({showName, name}) {
	return (
  	<div>
    {showName && (<span>{name}</span>)} // 通过 showName 判断是否展示 name 文本组件
    </div>
  );
}

配置

在每个组件的高级属性设置中有一个是否渲染属性，用于控制组件的条件渲染。

默认情况下是否渲染的配置值为 true，通常我们会采用变量绑定的方式来设置是否渲染属性。

配置了是否渲染的组件会在大纲树中展示一个分支的小 Icon 标记组件设置了是否渲染属性：

使用场景

下面我们用一个简单的例子来讲解如何使用条件渲染。我们通过 URL 参数来控制一个文本组件的显隐，当 URL 参数中存在 showName 参数时则展示，否则不展示，配置如下所示：

通过变量绑定方式设置文本组件是否渲染属性：

给文本组件的是否渲染属性绑定一个全局变量state.urlParams.showName用于根据 url 参数判断实现渲染文本组件：

最后我们可以通过在预览页面设置 showName 参数的方式来控制文本组件的展示如下所示 (我们可以通过预览页面右上角的在新窗口打开来在浏览器中直接打开预览页面，从而为其设置参数)：

URL 中没有 showName 参数：

URL 中有 showName 参数：