reactjs / reactjs/react-tabs

false warning about "'Tab' outside 'TabList'" when using Immutable seq

Aperta
#198 4 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug
Lingua principale
JavaScript
Stelle
3.1k
Fork
455
Merge medio
5h 9m
PR unite (30g)
2

Descrizione

import React from 'react';
import { OrderedMap } from 'immutable';
import { Tabs, Tab, TabList, TabPanel } from 'react-tabs';

const tabData = OrderedMap({
  one: '1',
  two: '2',
  three: '3',
});

export default function Test() {
  return <div>
    <Tabs>
      <TabList>
        {
          // This line triggers `Failed prop type: Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component.`
          tabData.keySeq().map(key => <Tab key={key}>{key}</Tab>)
          // If change to use toArray() or toList(), the warning disappears.
          // tabData.keySeq().toArray().map(key => <Tab key={key}>{key}</Tab>) // no warning
          // tabData.keySeq().toList().map(key => <Tab key={key}>{key}</Tab>)  // no warning
        }
      </TabList>

      {
        tabData.entrySeq().map(([key, value]) => <TabPanel key={key}>{value}</TabPanel>)
      }
    </Tabs>
  </div>;
}

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

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.

Direzione di ricerca

Inizia eseguendo la riproduzione JSX con Immutable OrderedMap e react-tabs, quindi confronta keySeq().map() con le varianti toArray() e toList() mostrate nell’issue. Segui l’avviso relativo a Tab al di fuori di TabList e identifica perché lo attiva solo la forma di sequenza Immutable. Il lavoro è completato quando l’esempio keySeq() viene renderizzato senza il falso avviso, mentre i pannelli delle schede continuano a funzionare.

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

Valutazione

Stack tecnologico
javascript, react
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.