带参数的React中的重构函数

function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Logged: ${WrappedComponent.name}`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const MyComponent = () => <div>Hello World</div>;
const EnhancedComponent = withLogger(MyComponent);

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  };

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

<MouseTracker render={({ x, y }) => (
  <h1>The mouse position is ({x}, {y})</h1>
)} />

import React, { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}

function withEnhancement(WrappedComponent) {
  return function EnhancedComponent(props) {
    const newProps = { ...props, additionalProp: 'value' };
    return <WrappedComponent {...newProps} />;
  };
}