重用React组件的所有内容，除了它的渲染方法。

Question

我有两个组件，其中一个组件我想继承另一个组件的所有类函数和状态，但更新渲染方法。有没有办法在React中干净利落地完成这个任务？

class A extends Component {
  state = {
    ...
  }
  componentDidMount() {
    this.setState({
      ...
    });
  }
  changeText = (e) => {
    this.setState({
      text: e.target.value,
    });
  };
  changeType = (e) => {
    this.setState({
      type: e.target.value,
    });
  };
  ...
}

class B extends Component {
  render() {
    ...
  }
}

Answer 1

我想 高阶组件 就是你要找的东西。

HOCs是React中重用组件逻辑的一种技术，所以你可以把所有你想分享的东西都写在HOC中，然后把每个需要的组件都用HOC包起来

Answer 2

你提供的东西应该已经可以用了，虽然你必须从A扩展组件B，像这样。

class A extends React.Component {
  state = {
    text: "Hello"
  };

  componentDidMount() {
    this.setState({text: "Hello World"});
  }

  render() {
    return <h1>I am A.</h1>
  }
}

class B extends A {
  render() {
    return <h1>{this.state.text + " in B."}</h1>
  }
}