Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Tab物料的slot组件总是重新加载当修改prop时。

Abierto
  • ¿Algo no está bien?
#3,103 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza con la función setValue del prop tabs y su llamada a node.children.mergeChildren en el esquema mostrado en el informe. Reproduce un cambio del prop tab con un componente de slot grande y rastrea por qué el slot se vuelve a montar; se considera terminado cuando cambiar el prop tab ya no recarga el contenido existente del slot.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

每次修改tab prop时(这个属性有个setValue会更新children的值)，tab children slot里的组件总是remount。当slot组件大时就会导致设计页面卡顿。希望有一种方法能让slot不重复加载。
下面是tab的schema配置。

{
      "componentName": "ColorfulTab",
      "title": "选项卡",
      "category": "布局容器类",
      "group": "高级组件",
      "configure": {
        "props": [
          {
            "name": "tabs",
            "title": "标签项",
            "setter": {
              "componentName": "EventEditSetterRefactor",
              "props": {
                "placeholder": "请输入标签名"
              }
            },
            "extraProps": {
              "display": "accordion",
              "getValue": {
                "type": "JSFunction",
                "value": "function getValue(target) {\n          const map = target.node.children.map((child) => {\n            const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;\n  const buttonConfig = child.getPropValue('buttonConfig') ? child.getPropValue('buttonConfig') : { \n funcShow: {}, functional: {}, tooltip: {}, btnStyle: {}, fontStyle: {}, \n };           return {\n              key,\n               title: child.getPropValue('tab'),\n  buttonConfig          };\n          });\n          return map;\n        }"
              },
              "setValue": {
                "type": "JSFunction",
                "value": "function setValue(target, value) {\n          const { node } = target;\n          const map = {};\n\n          if (!Array.isArray(value)) {\n            value = [];\n          }\n console.info('value node', value);         value.forEach((item) => {\n            const tabItem = Object.assign({}, item);\n            map[item.key] = tabItem;\n          });\n\n          node.children.mergeChildren(\n            (child) => {\n       const children = child.getPropValue('children') || {type: 'JSSlot', params: undefined, value: undefined, title: undefined, name: undefined}; child.setPropValue('children', children); const key = String(child.getPropValue('key') || child.id);\n              if (Object.hasOwnProperty.call(map, key)) {\n                child.setPropValue('tab', map[key].tab || map[key].title);child.setPropValue('title', map[key].tab || map[key].title);\n     console.info('node key', key);           delete map[key];\n                return false;\n              }\n              return true;\n            },\n            (children) => {\n              const items = [];\nconsole.info('child 1', children, map);              for (const key in map) {\n                if (Object.hasOwnProperty.call(map, key)) {\n                  items.push({\n                    componentName: 'ColorfulTabPane',\n                    props: map[key],\n                  });\n                }\n              }\n              return items;\n            },\n            (child1, child2) => {\n              const a = value.findIndex(\n                (item) => String(item.key) === String(child1.getPropValue('key') || child1.id),\n              );\n              const b = value.findIndex(\n                (item) => String(item.key) === String(child2.getPropValue('key') || child2.id),\n              );\n console.info('node sorter');             return a - b;\n            },\n          );\n        }"
              }
            }
          },
          
        "component": {
          "isContainer": true,
          "nestingRule": {
            "childWhitelist": [
              "ColorfulTabPane"
            ]
          }
        },
        "advanced": {
          "initialChildren": [
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_01",
                "tab": "Item 1",
                "title": "Item 1",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            },
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_02",
                "tab": "Item 2",
                "title": "Item 2",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            },
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_03",
                "tab": "Item 3",
                "title": "Item 2",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            }
          ]
        },
        "supports": {
          "style": true
        }
      },
      
    },
`
Lenguaje dominante
TypeScript
Estrellas
15.9k
Forks
2.7k
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de alibaba/lowcode-engine

Todos los issues de alibaba/lowcode-engine

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.