如何同时使用2个高阶分量？ （为了使用react-intl中的injectIntl​​）

Question

我知道，为了使用react-intl库中的injectIntl​​，我将需要以下内容：

export default injectIntl(SectionNavbars)

但是我已经在使用withStyles高阶组件，如何将两者结合在一起？

import React from 'react'
/* more stuff */
import { injectIntl } from 'react-intl'

class SectionNavbars extends React.Component {

  render() {
    const { classes } = this.props;
    const { intl } = this.props;
    return (

      <div className={classes.section}>
        <Header
          brand={ <img src={logo}/> }
          rightLinks={
              <ListItem className={classes.listItem}>
                <CustomDropdown
                        buttonText={intl.formatMessage({ id: 'products' })}
                        buttonProps={{
                          className: classes.navLink,
                        }}
                        dropdownList={[
                         /*stuff*/
                        ]}
                      />
              </ListItem>
          }
        />
      </div>
   );
  }
}

export default withStyles(navbarsStyle)(SectionNavbars);

Answer 1

您可以像这样injectIntl(withStyles(navbarsStyle)(SectionNavbars))

组合HOC

或更佳

1. 您可以使用recompose library中的compose
2. 用于函数式编程的其他助手，例如lodash中的flow和flowRight

此外，我建议您阅读重组文档，它确实有助于理解HOC并提供了非常有用的内容。