web-dev-qa-db-fra.com

Comment étendre un composant React?

Supposons qu'il existe un composant React que j'aime bien, mais que je souhaite modifier. Pour cet exemple, nous allons utiliser le LinearProgress de Material UI. Je souhaite créer une barre de recherche cliquable. de cela.

class SeekBar extends LinearProgress {
  componentDidMount() {
    super.componentDidMount();
    console.log('my stuff here');
  }
}

Mais je sens que je pourrais être très limité quant à ce que je peux faire pour changer ce que render renvoie. Peut-être que je vais à ce sujet tout faux, cependant. Si j'aime un composant React particulier, tel qu'un composant d'interface utilisateur Matériau, quelle est une bonne façon, réutilisable, de personnaliser son apparence et ses fonctionnalités et de le personnaliser?

reactjsmaterial-ui
24
ffxsam

Dans le monde ES6/JSX/React, vous pouvez étendre les comportements et les valeurs des composants de plusieurs manières. Je recommanderais l'une des solutions suivantes, étant donné que vous utilisez l'interface utilisateur matérielle.

Premier cas:

Vous avez deux composants qui étend le Component de React:

class ExampleComponent extends React.Component {
  render () {
    return(
      <div>
        <button {...this.props}>
          Click me!
        </button>
      </div>
    )
  }
}

class RenderComponent extends React.Component {
  clickHandler () {
    console.log('Click fired!')
  }

  render () {
    return(
      <ExampleComponent onClick={this.clickHandler.bind(this)} />
    )
  }
}

Dans cet exemple, onClick est transmis via des accessoires à l'intérieur du rendu ExampleComponent. Exemple ici .

Deuxième cas:

Ceci est similaire sur la façon dont Material UI étend ses propres composants:

class ExampleComponent extends React.Component {
  clickHandler () {
    console.log('Click fired!')
  }
}

class RenderComponent extends ExampleComponent {
  render () {
    return(
      <div>
        <button onClick={this.clickHandler.bind(this)}>
          Click me!
        </button>
      </div>
    )
  }  
}

Dans cet exemple, vous avez un composant qui étend Component à partir de React mais ne disposez que de méthodes d'événement. Ensuite, vous étendez ce composant et rendez le vôtre avec le comportement étendu. - Voici un exemple en direct .

J'espère que ça aide!

38
Inacio Schweller

Une façon est:

export default class Seekbar extends React.Component{

   // perform any modification

   render(){
      return <LinearProgress ...changes/>
   }
}

Un autre moyen est un composant d'ordre supérieur, HOC. Voici un excellent blog avec plus d'informations: http://natpryce.com/articles/000814.html

Je pense qu'avec Material-UI, le mieux serait de l’envelopper et d’y apporter les modifications souhaitées. Malheureusement, ce projet est très étroitement lié à des choses telles que les styles inline et leur gestionnaire de thèmes. Il peut donc être difficile d'extraire un seul composant. HOC serait préférable pour des choses telles que le partage de fonctionnalités intelligentes entre composants, comme le transfert automatique d'un accessoire "thème" aux composants.

3
Tucker