满足对页面组件的动态渲染需求，目前包含 条件渲染 和 循环渲染。

以下实例展示给 Button 按钮添加渲染器。

条件渲染

需要用户自定义一个返回布尔值的函数，来决定当前组件是否渲染到页面上。函数参数 data 是 gs 下发给页面的全部数据。

示例函数

  1. // @params data 参数为当前页面接受的 gs 下发的数据
  2. // @return boolean
  3. function isRender(data){
  4.     return data.hasOkBtn;
  5. }

运行原理

  1. isRender(data) ? <Button>按钮</Button> : null

循环渲染

需要用户自定义一个返回数组的函数，数组中每一项都直接展开传递给当前组件

实例函数

  1. // @params data 参数为当前页面接受的 gs 下发的数据
  2. // @return Array
  3. function forRender(data){
  4.     return [
  5.       [
  6.         children:"按钮1"
  7.     ],
  8.     [
  9.         children:"按钮2"
  10.     ]
  11.   ]
  12. }

运行原理

  1. forRender(data).map(fucntion(item){
  2.     return <Button {...item} ></Button>
  3. })

渲染器的组合规则

渲染器会叠加执行，通过这种叠加的机制，可以实现复杂的动态渲染规则。
以下代码能清晰展示执行逻辑。

条件渲染 + 循环渲染

  • 渲染器设置示例 ```jsx
  • isRender(data)
  • forRender(data) ```
  • 执行逻辑

当条件满足的时候，会执行第二个渲染器。

  1. isRender(data) ? forRender(data).map(function(item){
  2.     return <Button {...item} ></Button>
  3. }) : null

循环渲染 + 条件渲染

  • 渲染器设置示例 ```jsx
  • forRender(data)
  • isRender(data) ```
  • 执行逻辑

在循环渲染中，会增加条件判断。 注: 在 for 循环中条件渲染器的第一个参数更改为迭代器的 item

  1. forRender(data).map(function(item){
  2.     return isRender(item) ? <Button {...item} ></Button> : null;
  3. })

复杂组合

  1. <Button></Button>
  2. + forRender(data)
  3. + isRender(data)
  4. + isRender(data)
  5. + forRender(data)
  1. forRender(data).map(function(item){
  2.     return isRender(item) ? 
  3.     isRender(data) ? 
  4.         forRender(data).map(function(it){
  5.             return <Button {...it} ></Button>
  6.            })
  7.     : null 
  8.   : null;
  9. })