如何扩展React组件？

Question

假设有一个我喜欢的React组件,但想要修改.对于此示例,我们将使用Material UI LinearProgress.我想用它制作一个可点击的搜索栏.

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

但我觉得,就改变render回报而言,我可以做的事情非常有限.不过,也许我会把这一切都搞错了.如果我喜欢特定的React组件,例如Material UI组件,那么自定义其外观和功能并使其成为我自己的好的,可重用的方法是什么？

Answer 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 扩展但仅具有事件方法的组件.然后,扩展此组件并使用扩展行为呈现自己的组件.这是一个实例.

希望能帮助到你!