web-dev-qa-db-ja.com

Reactコンポーネントを拡張するには？

React私が気に入っているが修正したいコンポーネントがあるとします。この例では、マテリアルUIのLinearProgressを使用します。クリック可能なシークバーを作成しますそれの。

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

しかし、renderが返すものを変更する限り、私ができることは非常に限られているように感じます。たぶん私はこれについてすべて間違っているつもりです。マテリアルUIコンポーネントなどの特定のReactコンポーネントが好きな場合、外観と機能をカスタマイズして独自に作成するための優れた再利用可能な方法は何ですか？

reactjsmaterial-ui
24
ffxsam

ES6/JSX/Reactの世界では、さまざまな方法でコンポーネントの動作と値を拡張できます。マテリアルUIを使用することを考慮して、次のいずれかをお勧めします。

最初のケース：

ReactからComponentを拡張する2つのコンポーネントがあります。

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)} />
    )
  }
}

その例では、onClickはレンダリングされたExampleComponent内の小道具を介して渡されます。 ここの例 。

2番目のケース：

これは、マテリアルUIが独自のコンポーネントを拡張する方法に似ています。

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>
    )
  }  
}

この例では、ReactからComponentを拡張するコンポーネントがありますが、イベントメソッドのみがあります。その後、このコンポーネントを拡張し、拡張動作で独自のコンポーネントをレンダリングします。 実際の例です 。

それが役に立てば幸い！

38
Inacio Schweller

1つの方法は次のとおりです。

export default class Seekbar extends React.Component{

   // perform any modification

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

別の方法は、高次コンポーネント、HOCです。詳細はこちらのすばらしいブログをご覧ください。 http://natpryce.com/articles/000814.html

Material-UIでの最善の策は、それをラップして、必要な変更を加えることだと思います。残念ながら、このプロジェクトはインラインスタイルとそのテーママネージャーのようなもののおかげで非常に緊密に結合されているため、単一のコンポーネントを取り出すのは難しいかもしれません。 HOCは、「テーマ」の小道具を自動的にコンポーネントに渡すなど、コンポーネント間でスマート機能を共有するようなものに適しています。

3
Tucker