React新手求助：多页面复用功能的最佳实践及HOC嵌套调用问题

完全可以在自定义HOC中嵌套调用其他HOC！你的思路非常对——把重复的逻辑（比如injectIntl国际化注入，以及未保存修改阻止跳转的Prompt）封装到一个统一的HOC里，就能彻底告别每个页面组件复制粘贴代码的麻烦。

不过你当前的代码有个小问题：你在定义完EnhanceClass之后才用injectIntl包装它，但Enhance这个HOC返回的还是未被增强的原类，导致子组件拿不到intl属性。咱们调整一下包装时机，同时把Prompt的逻辑也整合进去，给你一个完整的解决方案：

import React, { Component } from 'react';
import { intlShape, injectIntl } from 'react-intl';
import { Prompt } from 'react-router-dom';

// 自定义HOC：同时整合injectIntl和未保存修改阻止跳转功能
const withFormGuardAndIntl = (ComposedComponent) => {
  // 先定义增强后的类组件
  class EnhancedComponent extends Component {
    static propTypes = {
      intl: intlShape.isRequired
    };

    state = {
      hasUnsavedChanges: false
    };

    // 提供给子组件的方法，用于标记是否有未保存修改
    setHasUnsavedChanges = (value) => {
      this.setState({ hasUnsavedChanges: value });
    };

    render() {
      const { hasUnsavedChanges } = this.state;
      const { intl, ...restProps } = this.props;

      return (
        <>
          {/* 渲染Prompt，阻止未保存修改时跳转 */}
          <Prompt
            when={hasUnsavedChanges}
            message={intl.formatMessage({
              id: 'form.unsavedChanges',
              defaultMessage: '你有未保存的修改，确定要离开吗？'
            })}
          />
          {/* 将intl、状态控制方法和其他props传给子组件 */}
          <ComposedComponent
            {...restProps}
            intl={intl}
            hasUnsavedChanges={hasUnsavedChanges}
            setHasUnsavedChanges={this.setHasUnsavedChanges}
          />
        </>
      );
    }
  }

  // 用injectIntl包装我们的增强类，完成国际化注入
  return injectIntl(EnhancedComponent);
};

export default withFormGuardAndIntl;

怎么使用这个HOC？ #

只需要用它包装你的页面组件就行，比如：

// Employee组件示例
class Employee extends Component {
  handleInputChange = () => {
    // 当表单内容变化时，调用HOC提供的方法标记未保存状态
    this.props.setHasUnsavedChanges(true);
  };

  handleSave = () => {
    // 保存后重置未保存状态
    this.props.setHasUnsavedChanges(false);
    // 其他保存逻辑...
  };

  render() {
    // 直接使用this.props.intl进行国际化
    const { intl } = this.props;
    return (
      <div>
        <h1>{intl.formatMessage({ id: 'employee.title' })}</h1>
        <input onChange={this.handleInputChange} />
        <button onClick={this.handleSave}>{intl.formatMessage({ id: 'common.save' })}</button>
      </div>
    );
  }
}

// 用自定义HOC包装Employee组件
export default withFormGuardAndIntl(Employee);

关键说明： #

• 嵌套HOC的正确姿势：我们在HOC内部先定义好带Prompt逻辑的组件，最后用injectIntl包装它再返回，这样子组件就能自动拿到intl属性。
• 状态共享：HOC维护hasUnsavedChanges状态，并提供修改方法给子组件，子组件只需要调用这个方法就能触发Prompt的拦截逻辑。
• 完全复用：Department、Salary组件都可以用同样的方式包装，不用再重复写injectIntl和Prompt的代码，新增组件时也只需要一行代码搞定。

如果你后续转向函数组件开发，也可以用自定义Hook来实现类似的复用逻辑，比如useFormGuardAndIntl，原理是一样的——把重复逻辑封装起来，让组件只关注业务代码。

内容的提问来源于stack exchange，提问作者cumibulat