Как использовать 2 компонента высшего порядка одновременно?(чтобы использовать injectIntl ​​из Reaction-Intl) - PullRequest
Новая
       23

Как использовать 2 компонента высшего порядка одновременно?(чтобы использовать injectIntl ​​из Reaction-Intl)

0 голосов
/ 21 ноября 2018

Я знаю, что для использования injectIntl ​​из библиотекиact-intl мне понадобится что-то вроде: 

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);

1 Ответ

0 голосов
/ 21 ноября 2018

Вы можете комбинировать HOC следующим образом injectIntl(withStyles(navbarsStyle)(SectionNavbars))

Или лучше

  1. Вы можете использовать compose из Перекомпоновать библиотеку
  2. другие помощники для функционального программирования, такие как flow и flowRight из lodash

Кроме того, я бы порекомендовал вам прочитать документацию по перекомпоновке, это действительно помогает понять HOC и предоставляет действительно полезныепрочее.

...