reactjs / reactjs/react-docgen

Doesn't find HOCs that just wrap & re-export component

Aperta
#177 10 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

needs-discussion
Lingua principale
TypeScript
Stelle
3.8k
Fork
316
Merge medio
5h 7m
PR unite (30g)
4

Descrizione

Some HOCs aren't correctly parsed when they're just calling a function on an imported component. For example, exporting a HelloButton component that just exports an imported Button component wrapped in redux connect:

hello-button.js:

// @flow
import { connect } from 'react-redux';

import { sayHello } from '../actions/hello';
import Button from '../components/Button';

const mapStateToProps = () => ({
        label: 'Say something',
});

const mapDispatchToProps = dispatch => ({
        handleClick: () => {
                dispatch(sayHello('Hi!!!'));
        },
});

// HelloButton
export default connect(mapStateToProps, mapDispatchToProps)(Button);

button.js:

// @flow
import React from 'react';
import './index.css';

type Props = {
        label: string,
        handleClick: Function
};

const Button = ({ label, handleClick }: Props) =>
        <button styleName='button' onClick={handleClick}>{label}</button>
;

export default Button;

Button is properly parsed, but HelloButton is not considered a component, even when using the findAllComponentDefinitions resolver.

Guida per i contributori

Apri la guida per i contributori

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 con gli esempi hello-button.js e button.js, quindi segui il resolver findAllComponentDefinitions per capire perché un componente importato e wrappato da connect non viene rilevato. Conferma la modifica verificando che HelloButton venga riconosciuto come componente, mentre Button continui a essere analizzato correttamente.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.