属性 'onClick' 不存在于类型 '{ children?: ReactNode; }'

Question

我似乎找不到我做错了什么...... 任何帮助将不胜感激：

type Props = {
  onClick: () => void, 
  value: string
}

const CustomInput = forwardRef<Props>(({ onClick, value }, ref) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));


error message: Property 'onClick' does not exist on type '{ children?: ReactNode; }

导出默认自定义输入；

Answer 1

Props 泛型应该作为第二个参数，而不是第一个。

示例：

type Props = {
  onClick: () => void, 
  value: string
}

type RefType=number
const CustomInput = forwardRef<RefType, Props>(({ onClick, value }, ref) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));

forwardRef 的第一个通用参数用于 ref 类型，第二个 - 如果相应地用于 props

Answer 2

您可以这样添加：

type Props = {
  onClick: () => void, 
  value: string
}

const CustomInput = forwardRef<Props>(({ onClick, value }:Props, ref:any) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));

属性 'onClick' 不存在于类型 '{ children?: ReactNode; }'

Property 'onClick' does not exist on type '{ children?: ReactNode; }'

typescript

reactjs

react-typescript