Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#3,103 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Inizia con la funzione setValue della prop tabs e la relativa chiamata a node.children.mergeChildren nello schema mostrato nel report. Riproduci una modifica della prop tab con un componente slot di grandi dimensioni e traccia il motivo per cui lo slot viene rimontato; il lavoro è completato quando la modifica della prop tab non ricarica più il contenuto esistente dello slot.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

每次修改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
        }
      },
      
    },
`
Lingua principale
TypeScript
Stelle
15.9k
Fork
2.7k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di alibaba/lowcode-engine

Tutte le issue di alibaba/lowcode-engine

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.