reactjs - 如何扩展 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，我建议您使用以下其中一项。

第一种情况:

您有两个从 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 内的 props 传递。 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 .

希望对你有帮助!