reactjs - 反应重用功能/组件功能

Question

我是 React JS 的新手。将相同功能/特性应用于大多数页面的最佳实践是什么？

案例：我有 Employee、Department、Sallary Menu（组件），我希望所有这些页面都具有injectIntl​​ 功能和 react-router 提示功能，以防止用户在有更新（脏）表单时离开页面。

现在，我粘贴每个组件的代码，并在将新组件添加到我的应用程序时。我已经尝试过高阶组件，是否可以从 HOC 函数调用另一个 HOC 函数？injectIntl​​ 是一个 HOC 函数。我想建立我自己的 HOC，它将调用injectIntl​​。

我的 HOC：

import { Component } from "React";
import React from 'react';
import { intlShape, injectIntl } from 'react-intl';

export var Enhance = (ComposedComponent) => class EnhanceClass extends React.Component {

    constructor(props) {
        super(props);
        this.state = { data: null };
    }

    componentDidMount() {
      this.setState({ data: 'Hello' });
    }

    render() {
      return <ComposedComponent {...this.props} data={this.state.data} />;
    } 

  };

Enhance.propTypes = {
    intl: intlShape.isRequired
};

EnhanceClass = injectIntl(EnhanceClass);

Answer 1

您可以调用多个 HOC，例如

const EnhancedClass = Enhance(injectIntl(Component));

所以你的 HOC 看起来就像

export var Enhance = (ComposedComponent) => class EnhanceClass extends React.Component {

    constructor(props) {
        super(props);
        this.state = { data: null };
    }

    componentDidMount() {
      this.setState({ data: 'Hello' });
    }

    render() {
      return <ComposedComponent {...this.props} data={this.state.data} />;
    } 

  };

现在EnhancedClass将拥有injectIntl和EnhanceHOC提供的功能