在genComponent函数内使用useCallback的问题

Question

老师，这里浏览器中会提示“useCallback 钩子被调用在一个不是 React 函数组件或自定义 React 钩子函数的地方。React 组件名称必须以大写字母开头，而 React 钩子函数名称必须以 “use” 开头”这个报错

能够直接将 genComponent 前面改成 大写GenComponent 吗？这样的话就是将声明的组件进行调用，感觉稍微有点不妥当。

Answer 1

双越 2024-07-04 07:42:57

可以不用 genComponent 这种形式。换一种方式：定义一个 Wrapper 组件，然后把 c 作为 children 传递到 Wrapper 组件中。

能看懂这个意思吗？

• 提问者 孟起笨猪 #1

  type WrapperPropsType = {
    comp: ComponentConfType
    children: JSX.Element
  }
  
  const Wrapper: FC<WrapperPropsType> = (props) => {
    const dispatch = useDispatch()
  
    const { comp, children } = props
    const { title, type, defaultProps } = comp
  
    const handleClick = useCallback(() => {
      dispatch(addComponent({
        fe_id: nanoid(),
        title,
        type,
        props: defaultProps
      }))
    }, [])
  
    return <div className={styles.wrapper} onClick={handleClick}>
      {children}
    </div>
  }
  
  const Lib: FC = () => {
  
    return (
      <>
        {componentConfGroup.map((group, index) => {
          const { groupId, groupNmae, components } = group
          return <div key={groupId}>
            <Title level={3} style={{fontSize: '16px', marginTop: index > 0 ? '20px' : '0'}}>{groupNmae}</Title>
            
            <div>{components.map(c => {
              const { type, Component } = c
              
              return <Wrapper key={type} comp={c}>
                <Component/>
              </Wrapper>
            })}</div>
          </div>
        })}
      </>
    )
  }
  按老师你的意思， 我改成这样了， 可能稍有出入，不过功能没问题了

• 双越 回复 提问者 孟起笨猪 #2

  很赞，就是这个意思。