在多个组件中重用带有setState的函数

import React, { Component } from 'react';

const withSetState = (WrappedComponent) => {
  return class extends Component {
    state = {
      count: 0
    };

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

    render() {
      return (
        <WrappedComponent
          count={this.state.count}
          incrementCount={this.incrementCount}
          {...this.props}
        />
      );
    }
  };
};

export default withSetState;

import React from 'react';
import withSetState from './withSetState';

const ComponentA = ({ count, incrementCount }) => {
  return (
    <div>
      <h2>Component A</h2>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

const ComponentB = ({ count, incrementCount }) => {
  return (
    <div>
      <h2>Component B</h2>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default withSetState(ComponentA);
export const ComponentBWithSetState = withSetState(ComponentB);