记一段优雅的render函数 -- 递归 + jsx props展开

54 阅读1分钟

让代码 精简,优雅
1 - 理清结构,层次,类型
2 - 利用模块,递归,分解逻辑,
clean code

    // 递归渲染 + jsx props 展开
    renderOption(config, level /** level标识渲染层级 */) {

      return config.map(item => {

        let func
        const methodKey = item.option.methods
        if(methodKey) {
          func = getMethods(methodKey)
        }

        return  <UnFormItem 
                  option={ item.option } 
                  class={ level === 1 ? 'mr-b-16': '' }
                >
                  <item.tag
                    style={ item.option.style }
                    placeholder={item.option.label}
                    v-model={this.editorStore[item.option.model]}
                    size="small"
                    { ...{ props: item.option }}
                    { ...{ on: func && func(this.editorStore, item) }}
                  >
                    {
                      item.tag === 'el-button' ? item.option.label : ''
                    }
                    {
                      item.children && this.renderOption(item.children, level + 1)
                    }
                  </item.tag>
                </UnFormItem>
      })
    }