Comment étendre un composant React?

Disons qu'il y a une Réagir composant que j'aime, mais que vous voulez modifier. Pour cet exemple, nous allons utiliser le Matériel de l'INTERFACE utilisateur de LinearProgress. Je veux faire un bouton de barre de recherche.

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

Mais je sens que je pourrais être très limité pour ce que je peux faire changer ce render retourne. Je vais peut-être au sujet de cette tout faux, cependant. Si j'aime un particulier Réagir composant, tel qu'un Matériau composant de l'INTERFACE utilisateur, ce qui est un bon, réutilisable façon de personnaliser son look et fonctionnalité et de faire mon propre?

source d'informationauteur ffxsam | 2016-02-28

  1. 21

    Dans l'ES6/JSX/Réagir du monde, vous pouvez étendre les composants des comportements et des valeurs de plusieurs façons. Je recommande l'une des opérations suivantes, en considérant que vous utiliser les éléments de l'INTERFACE utilisateur.

    Premier cas:

    Vous avez deux composantes qui s'étend de la Component de Réagir:

    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 de l'rendu ExampleComponent. Exemple ici.

    Deuxième cas:

    Ceci est similaire à la façon dont le Matériel UI s'étend leurs 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 disposez d'un composant qui s'étend Component de Réagir, mais ont seulement des méthodes d'événement. Ensuite, vous étendez cette composante et de rendre votre propre avec l'étendue de comportement. Ici est un exemple vivant.

    Espère que cela aide!

  2. 2

    L'une:

    export default class Seekbar extends React.Component{

   //perform any modification

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

    Une autre façon est d'un Ordre Plus élevé Composant, HOC. Voici un super blog avec plus d'info: http://natpryce.com/articles/000814.html

    Je pense qu'avec du Matériel-l'INTERFACE utilisateur de votre meilleur pari serait de l'emballer et de faire toutes les modifications que vous souhaitez. Malheureusement, ce projet est très étroitement couplé grâce à des choses comme les styles en ligne et leur thememanager donc, en prenant un seul composant peut être difficile. HOC serait mieux pour des choses comme le partage de certaines fonctionnalités dans les composants, comme le passage d'un "thème" prop automatiquement les composants.