Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Tabs with context provider in between <Tabs> and <Tablist>

Ouverte
  • Quelque chose ne va pas ?
#344 0 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript, react
Domaine
frontend

Piste de recherche

Aucun fichier source ni test n’est indiqué. Commencez par reproduire la structure DndProvider, Tabs, TabList et TabPanel, puis examinez comment l’avertissement compte les éléments Tab et TabPanel. C’est terminé lorsqu’une composition plaçant le provider en premier se rend sans l’avertissement tout en conservant un nombre égal d’éléments Tab et TabPanel.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Hi all,

I'm working on creating a drag and drop version of react tabs using react-dnd.

React dnd requires a DndProvider context to be wrapped around any draggable/droppable objects. I'm currently trying to do something like this:


function DndTabs({data}) {
  // (...Some functions that require the DndContext here...)
  return (
    <TabList>
      {Object.keys(data).map(tabId => {
        <Tab key={tabId}> tabId </Tab>
      })}
    </TabList>
  )
}

function DndContainer({data}) {
   return (
      <DndProvider> 
         <DndTabs data={data} />
      </DndProvider>
   )
}

function TabHolder() {
  return (
    <Tabs>
        <DndContainer data={data} />
        {Object.keys(data).map(tabId => {
          <TabPanel key={tabId}> tabId </TabPanel>
        })}
    </Tabs>
  )
}

This is throwing the
Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in 'UncontrolledTabs' error, even though the actual rendered HTML should have tablist and tabpanels as siblings with an equal number of Tab and TabPanel elements.

I tried following the advice in #253 (calling the react component as a function instead of letting react render it) but this causes issues with the DndContext because functions that require the context to exist need to render after the Context itself renders.

Is there any structure that I can use that will make this work, following the additional constraint that the Provider for the Dnd Context needs to appear/render before the actual Tabs?

Langage dominant
JavaScript
Étoiles
3.1k
Forks
455
Aucune PR mergée en 30 j

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de reactjs/react-tabs

Toutes les issues de reactjs/react-tabs

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.