Как продлить компонент React?

Скажем, там есть компонент React, который мне нравится, но хочу изменить. В этом примере мы будем использовать Material UI LinearProgress. Я хочу сделать из него интерактивную панель поиска.

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

Но я чувствую, что могу быть очень ограниченным в отношении того, что могу сделать, чтобы изменить то, что возвращает render. Может быть, я все это сделаю неправильно. Если мне нравится конкретный компонент React, такой как компонент Material UI, то какой хороший, многоразовый способ настроить внешний вид и функциональность и сделать его собственным?

Ответ 1

В мире ES6/JSX/React вы можете расширить поведение компонентов и значения разными способами. Я бы порекомендовал одно из следующего, считая, что вы используете Material UI.

Первый случай:

У вас есть два компонента, которые расширяют Component от 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)} />
    )
  }
}

В этом примере onClick передается через реквизиты внутри отображаемого ExampleComponent. Пример здесь.

Второй случай:

Это похоже на то, как Material 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>
    )
  }  
}

В этом примере у вас есть компонент, который расширяет Component от React, но имеет только методы событий. Затем вы расширяете этот компонент и предоставляете свое собственное расширенное поведение. Вот живой пример.

Надеюсь, что это поможет!

Ответ 2

Один из способов:

export default class Seekbar extends React.Component{

   // perform any modification

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

Другим способом является компонент более высокого порядка, HOC. Здесь отличный блог с дополнительной информацией: http://natpryce.com/articles/000814.html

Я думаю, что с помощью Material-UI лучше всего его обернуть и внести любые изменения. К сожалению, этот проект очень тесно связан с такими вещами, как встроенные стили, и их thememanager так что взять один компонент из может быть трудно. HOC было бы лучше для таких вещей, как обмен некоторыми умными функциональными возможностями по всем компонентам, например, автоматическое добавление "темы" к компонентам.