如何扩展 React 组件？

Question

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

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

但我觉得就改变 render returns 而言，我能做的可能非常有限。不过，也许我做错了。如果我喜欢某个特定的 React 组件，例如 Material UI 组件，那么什么是自定义其外观和功能并使其成为我自己的好、可重用的方法？

Answer 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 更适合跨组件共享一些智能功能，例如自动将 "theme" prop 传递给组件。

Answer 2

在 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.

希望对您有所帮助！

如何扩展 React 组件？

How to extend a React component?

reactjs

material-ui

第一种情况：

第二种情况：