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

Deprecation of `children` and more complex Trees

Offen
  • Stimmt etwas nicht?
#734 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
25/100
Issue-Typ
Feature
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Beginne mit dem Deprecation-Hinweis in src/Tree.tsx ungefähr bei Zeile 367 und der Änderung aus #261. Vergleiche dann die auf children basierenden Beispiele mit der verlinkten Virtualisierungs-Sandbox und verfolge, wie der Inhalt von Tree und TreeNode behandelt wird. Abgeschlossen wäre dies erst mit einer festgelegten Position zur weiteren Unterstützung von children und einem konkreten Umfang für die Folgemaßnahme.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Hey there! First let me know if this is not the right place for discussions like this, I'm happy to move it elsewhere if so :)

Recently I've been working with a large Tree and with treeData I can think about two main ways of structuring it: 1. A memoized object derived from your tree dependencies; or 2. A Tree state / reducer with the triggers to update it (main case in docs). The problem I see/I'm facing with it is that it translates into a linear structure (coming from React / how hooks work), being transformed into a Tree:

function Component() {
  const firstLevelData = useGetFirstLevelData(); // even more of a problem when these are async
  const secondLevelData = useGetSecondLevelData();
  // + any other dep to build the tree
  const treeData = /* build tree, with everything needed inside this component */;
  return <Tree treeData={treeData} />;
}

This got me thinking: the DOM itself is a Tree, so having it performant and with good ways to abstract it is part of the problem React had to solve, which makes React nodes potentially the best way of solving this:

function SecondLevelNode() {
  const thirdLevelData = useGetThirdLevelData();
  return <TreeNode />; // + any other Node component, can even be <LoadingNode /> when async for example
}

function FirstLevelNode() {
  const secondLevelData = useGetSecondLevelData();
  return <TreeNode>{secondLevelData.map(() => <SecondLevelNode />)}</TreeNode>
}

function Component() {
  const firstLevelData = useGetFirstLevelData();
  return <Tree>{firstLevelData.map(() => <FirstLevelNode />)}</Tree>
}

I know there's a deprecation note in https://github.com/react-component/tree/blob/7dbaebb3fa3ddead8b0a24284169a12133ca074e/src/Tree.tsx#L367 for the children prop (also it's not used in any example), which was added with #261. However virtualization seemed to still work when using it. So I'm wondering:

  1. Is there any limitation/issue for it to be deprecated?
  2. Does it make sense to keep supporting it for better structuring Trees with different dependencies for each level?

Thanks!!

Vorherrschende Sprache
TypeScript
Sterne
1.3k
Forks
491
Ø Merge
48 Min.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. 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/tree

Alle Issues in react-component/tree

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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