Как заменить HOC, который удаляет реквизит и назначает имена классов с реагирующими хуками? - PullRequest
Новая
       14

Как заменить HOC, который удаляет реквизит и назначает имена классов с реагирующими хуками?

0 голосов
/ 14 марта 2019

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

  • позволяет компоненту принимать color проп
  • , передаетКомпонент className с классом css цвета
  • не передает цветовую опору компоненту

, это выглядит так: 

// withColor.js
import React from 'react'
import styles from './withColor.css'
import cn from 'classnames'

const withColor = TargetComponent => {
  const WrappedComponent = props => {
    // color is something like "black" or "red" and has a matching css class
    const { className, color, ...rest } = props
    const enhancedClassName = cn(className, {
      [styles[`Color-${color}`]]: color,
    })
    return <TargetComponent className={enhancedClassName} {...rest} />
  }
  return WrappedComponent
}

пример использования: 

// box.js
import React from 'react'
import withColor from '../hocs/withColor'

const Box = props => <div data-box {...props} />

export default withColor(Box)

Могу ли я использовать вместо этого реагирующие хуки?как бы это выглядело?

1 Ответ

2 голосов
/ 14 марта 2019

Все, что вам нужно, это написать пользовательский хук, который выполняет вышеуказанную логику.На самом деле это даже не крючок, а общая функция 

const useWithColor = (props) => {
   const { className, color, ...rest } = props
    const enhancedClassName = cn(className, {
      [styles[`Color-${color}`]]: color,
    })
   return {...rest, enhancedClassName};
}

и используйте его как 

export default props =>  {
   const dataProps = useWithColor(props);
   return <div data-box {...dataProps} />
}
...