Question

假设有一个我喜欢的React组件，但想要修改。对于此示例，我们将使用Material UI的class SeekBar extends LinearProgress { componentDidMount() { super.componentDidMount(); console.log('my stuff here'); } }。我想用它来制作一个可点击的搜索栏。

render

但我觉得就改变{{1}}返回的内容而言，我可以做的事情非常有限。不过，也许我会把这一切都搞错了。如果我喜欢特定的React组件（如Material UI组件），那么自定义其外观和功能并将其设置为自己的优秀，可重用的方法是什么？

Answer 1

在ES6 / JSX / React世界中，您可以通过多种方式扩展组件行为和值。考虑到您使用Material UI，我建议使用以下其中一种。

第一种情况：

您有两个组件可以从React扩展Component：

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内的道具传递。 Example here

第二种情况：

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

在此示例中，您具有从React扩展Component但仅具有事件方法的组件。然后，扩展此组件并使用扩展行为呈现自己的组件。 Here is a live example

希望它有所帮助！

Answer 2

一种方法是：

export default class Seekbar extends React.Component{

   // perform any modification

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

另一种方式是高阶组件，HOC。这是一个很棒的博客，其中包含更多信息：http://natpryce.com/articles/000814.html

我认为使用Material-UI你最好的选择是将它包装起来并进行你想要的任何修改。不幸的是，由于内联样式和主题管理器之类的东西，这个项目非常紧密耦合，因此单个组件可能很难。对于在组件之间共享一些智能功能之类的东西，HOC会更好，比如将“主题”道具自动传递给组件。

如何扩展React组件？

2 个答案:

第一种情况：

第二种情况：