重用有状态的React组件

要重用有状态的React组件，可以通过以下解决方法：

1. 创建一个基础组件： 首先，创建一个具有所需状态和方法的基础组件。这个基础组件应该包含所有共享的状态和行为。例如：

class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount() {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

2. 创建扩展组件： 然后，创建扩展组件，通过继承基础组件并添加特定的功能来扩展它。可以通过在构造函数中调用super(props)来继承基础组件的状态和方法。例如：

class ExtendedComponent extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      ...this.state,
      name: '',
    };
  }

  handleNameChange(event) {
    this.setState({
      name: event.target.value,
    });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={(event) => this.handleNameChange(event)}
        />
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

3. 使用扩展组件： 现在，可以在应用程序的其他部分使用扩展组件，并且它将拥有基础组件和扩展组件的所有状态和方法。例如：

class App extends React.Component {
  render() {
    return (
      <div>
        <ExtendedComponent />
      </div>
    );
  }
}

通过这种方法，可以创建一个具有通用功能的基础组件，并在需要时通过继承和扩展它来创建具有特定功能的组件。这样可以实现有状态组件的重用。