如何为react导航器创建包装子组件

import React from 'react';

// 创建一个高阶组件，接受导航器作为参数
const withNavigation = (WrappedComponent) => {
  class WithNavigation extends React.Component {
    navigateTo = (screen) => {
      // 在这里执行导航操作
      console.log(`Navigating to ${screen}`);
    }

    render() {
      // 将导航操作作为props传递给被包装的组件
      return <WrappedComponent navigateTo={this.navigateTo} {...this.props} />;
    }
  }

  return WithNavigation;
};

// 创建一个普通的React组件
const MyComponent = (props) => {
  const { navigateTo } = props;
  
  return (
    <div>
      <button onClick={() => navigateTo('ScreenA')}>Go to Screen A</button>
      <button onClick={() => navigateTo('ScreenB')}>Go to Screen B</button>
    </div>
  );
};

// 使用高阶组件包装MyComponent
const MyComponentWithNavigation = withNavigation(MyComponent);

export default MyComponentWithNavigation;