react重用功能/组件功能

Question

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

案例:我有员工，部门，沙拉利菜单(组件)，我希望所有这些页面都有injectIntl 功能和反应路由器提示功能，以防止用户离开页面时，有更新(脏)的形式。

现在，我粘贴每个组件的代码，并在将新组件添加到我的应用程序时粘贴。我已经尝试了高阶组件，是否可以从HOC函数调用另一个HOC函数？injectIntl是一个即席函数。我想构建我自己的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));

所以你的组委会看起来就像

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和Enhance HOC提供的功能