【React】常见的 HOC 使用案例

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
 
// 一个简单的组件，用于演示如何使用HOC
class MyComponent extends Component {
  render() {
    // 通过props访问路由和状态
    const { location, counter } = this.props;
    return (
      <div>
        <p>当前URL: {location.pathname}</p>
        <p>计数器值: {counter}</p>
      </div>
    );
  }
}
 
// 使用HOC（高阶组件）
// withRouter 用于访问路由属性
// connect 用于将状态映射到属性
export default withRouter(connect(state => ({ counter: state.counter }))(MyComponent));

这个例子中，我们创建了一个简单的React组件MyComponent，它展示了如何使用react-router-dom中的withRouter和react-redux中的connect来创建高阶组件。我们通过connect函数将应用程序的状态映射到组件的属性，并通过withRouter使组件能够访问当前的路由信息。这样的实践可以帮助我们减少每个组件中的重复代码，并使得组件更容易维护和测试。