如何替换剥离道具并用React钩子分配类名称的事件

Question

现在，我有一个高阶组件，可以使我加大任何组件，it：

• 允许组件进行color Prop
• 将组件与颜色的CSS类别一起使用className
• 不将颜色支柱传递给组件

看起来像这样：

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

我可以使用React Hooks做到这一点吗？它会是什么样？

Answer 1

您需要的只是编写执行上述逻辑的自定义钩子。实际上，它甚至不是钩子，而是一个通用函数

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} />
}