如何同时使用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. 您可以使用重组库中的 compose
2. 其他佣工像函数式编程flow和flowRight从lodash

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