重用 React 組件中的所有內容，除了它的 render 方法

Question

我有兩個組件，一個我想從另一個繼承所有 class 函數和 state，但更新渲染方法。 有沒有辦法在 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

我認為高階組件是您正在尋找的。

HOC 是 React 中用於重用組件邏輯的一種技術，因此您可以在 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>
  }
}