如何同时使用 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

你可以像这样组合 HOC injectIntl(withStyles(navbarsStyle)(SectionNavbars))

或者更好

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

另外，我建议您阅读 recompose 文档，它确实有助于理解 HOC 并提供非常有用的东西。