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

Deprecation of `children` and more complex Trees

Aperta
  • Qualcosa non va?
#734 1 commento 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia leggendo la nota di deprecazione in src/Tree.tsx intorno alla riga 367 e la modifica di #261. Confronta poi gli esempi basati su children con il sandbox di virtualizzazione collegato e traccia il modo in cui viene gestito il contenuto di Tree e TreeNode. Il lavoro sarebbe completo quando fosse stata definita una posizione sul mantenimento del supporto per children e un ambito concreto per il seguito.

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

Descrizione

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!!

Lingua principale
TypeScript
Stelle
1.3k
Fork
491
Merge medio
48m
PR unite (30g)
1

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 react-component/tree

Tutte le issue di react-component/tree

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.