Question

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

案例：我有员工，部门，Sallary菜单（组件），我希望所有这些页面都有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和Enhance HOC提供的功能

反应重用功能/组件功能

1 个答案: