PropTypes su componenti di ordine superiore

Question

C'è un modo per PropTypes da un componente all'interno di un componente di ordine superiore per puntare a dove sono stati creati?

Questo è un piccolo campione, ma se ci fosse più EnhancedButtons tutto un programma in file separati questo sarebbe molto difficile da eseguire il debug.

Poiché il componente ordine superiore è idealmente realizzato per la riusabilità, non possiamo mai sapere la posizione del componente che manca il metodo handleClick. Il metodo di rendering di _EnhancedButton è una variabile per qualsiasi Component che vogliamo migliorare.

C'è un modo per rendere più evidenti i PropTypes in cui vengono creati come FinalButton che è inserito ed è un'istanza di _EnhancedButton e manca il prop handleClick?

https://jsfiddle.net/kriscoulson/sh2b8vys/3/

var Button = (props) => (
 
\t <button onClick={() => props.handleClick() }> 
 
\t \t Submit 
 
\t </button> 
 
); 
 

 
Button.propTypes = { 
 
\t handleClick: React.PropTypes.func.isRequired 
 
} 
 

 
const EnhanceButton = Component => class _EnhancedButton extends React.Component { 
 
\t render() { 
 
    \t return (<Component { ...this.props }>{this.props.children}</Component>); 
 
    } 
 
} 
 

 
const FinalButton = EnhanceButton(Button); 
 

 
ReactDOM.render(
 
    <FinalButton />, 
 
    document.getElementById('container') 
 
);

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

Answer 1

Il nome FinalButton nel tuo esempio non sarà conosciuto a reagire dato che questo è solo il tuo nome variabile locale, ma modificare il nome del componente risultante a tutto quello che vuoi. Qui uso "Final" davanti a qualunque sia il nome originale.

Inoltre, possiamo copiare/unire i tipi di puntello al nuovo elemento.

function EnhanceButton(Component) { 
    class _EnhancedButton extends React.Component { 
     static displayName = 'Final' + (Component.displayName || Component.name || 'Component'); 

     render() { 
      return (
       <Component { ...this.props }>{this.props.children}</Component> 
      ); 
     } 
    } 
    _EnhancedButton.propTypes = Component.propTypes; 

    return _EnhancedButton; 
} 

Questo dà: Attenzione: PropType non riuscita: Richiesto prop handleClick non è stato specificato in Button. Verifica il metodo di rendering di FinalButton.

Fiddle: https://jsfiddle.net/luggage66/qawhfLqb/

Answer 2

Mentre la risposta di Deposito funziona molto bene, un altro, forse più pulita, alternativa è quella di dichiarare le proptypes come statico e dichiararli all'interno del corpo del componente.

const EnhanceButton = Component => class extends React.Component { 
    static propTypes = { 
    children: PropTypes.node, 
    } 
    static defaultProps = { 
    children: false, 
    } 
    render() { 
    return (
     <Component 
     { ...this.props } 
     > 
     {this.props.children} 
     </Component> 
    ); 
    } 
}