Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

OptGroup 是故意被限制嵌套使用吗

Offen
#908 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
48/100
Issue-Typ
Dokumentation
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
documentation

Rechercherichtung

Beginne damit, die Verarbeitung von OptGroup in src/utils/valueUtils.ts um Zeile 54 herum zu lesen, und sieh dir anschließend die offizielle Select-Dokumentation und die Beispiele zu den aktuellen Empfehlungen für Gruppierungen an. Erledigt ist die Aufgabe, wenn das unterstützte Verschachtelungsverhalten und seine Einschränkung dokumentiert sind oder das vereinbarte Verhalten festgehalten ist, falls das Projekt beschließt, tiefere Gruppen zu unterstützen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

官方文档和示例关于 OptGroup 的说明太少了,我发现 OptGroup 是故意被限制了嵌套使用,即 Select 只能支持一级分组。

在 src/utils/valueUtils.ts 第 54 行:

function dig(list: OptionType[], isGroupOption: boolean) {
    list.forEach((data) => {
      const label = data[fieldLabel];

      if (isGroupOption || !(fieldOptions in data)) {  // isGroupOption 限制了进一步递归更深层的 Group
        const value = data[fieldValue];

        // Option
        flattenList.push({
          key: getKey(data, flattenList.length),
          groupOption: isGroupOption,
          data,
          label,
          value,
        });
      } else {
        let grpLabel = label;
        if (grpLabel === undefined && childrenAsData) {
          grpLabel = data.label;
        }

        // Option Group
        flattenList.push({
          key: getKey(data, flattenList.length),
          group: true,
          data,
          label: grpLabel,
        });

        dig(data[fieldOptions], true);
      }
    });
  }

文档上没有说明分组仅限于一级,实现上也没有对内嵌分组容错(造成页面上某一个 Group 被显示成了 GroupOption,但实际上又无法选中),目前的样式没有准备做进一步内嵌的展示样式(当然实际上在这种选择框下面做过多内嵌展示也不友好)。

希望可以在文档上明确一下功能说明,明确说明此处不支持一级以上的分组,或者干脆就直接支持多级分组。

Vorherrschende Sprache
TypeScript
Sterne
938
Forks
482
Ø Merge
15 Std. 8 Min.
Gemergte PRs (30 T.)
2

Entwicklungsumgebung

Die Einrichtungsdateien dieses Projekts haben wir noch nicht geprüft. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-component/select

Alle Issues in react-component/select

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.