reactjs 具有forwardRef类型脚本错误的组件,其中所有属性应为布尔值

3qpi33ja  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(94)

我有一个组件,它为应用程序的各个部分形成了一个容器,称为Box:

interface BoxProps {
  keyId?: number;
  id?: string;
  propsRef?: React.ForwardedRef<HTMLDivElement>;
  span?: number | number[];
  rowSpan?: number | number[];
  center?: boolean;
  textAlign?: string;
  vertAlign?: string;
  transparent?: string;
  bgColor?: string;
  borderColor?: string;
  gridColumnStart?: number;
  gridColumnEnd?: number;
  classList?: string;
  collapsable?: boolean;
  children: React.ReactNode | JSX.Element | Element;
  styleList?: { [key: string]: string };
  title?: string;
  titleTooltip?: string;
  [key: string]: boolean;
}

const Box = forwardRef<HTMLInputElement, BoxProps>(
  (
    props,
    ref
  ) => {
    const {
      keyId,
      id,
      propsRef,
      span,
      rowSpan,
      center,
      textAlign,
      vertAlign,
      transparent,
      bgColor,
      borderColor,
      gridColumnStart,
      gridColumnEnd,
      classList,
      collapsable = false,
      children,
      styleList,
      title,
      titleTooltip
    } = props;

...
return (
<div> stuff </div>

我跟随这篇帖子来确定如何设置 prop :Using a forwardRef component with children in TypeScript
不幸的是,当我尝试使用这个组件时,我得到的错误是所有的props都应该是布尔值:

// REACT
import React from 'react';
import Box from './Box';
import Description from './Description';

const Recommendations = () => {
    return (
        <Box span={3}>
            <Description data="<h3><img class='margin-right padding-light' src='/assets/nn/images/globe.svg'>Recommendation #1</h3>" />
        </Box>
    )
}

export default Recommendations;

错误:

webpack compiled with 6 warnings
ERROR in src/components/elements/Recommendations.tsx:8:14
TS2322: Type 'number' is not assignable to type 'boolean'.
     6 | const Recommendations = () => {
     7 |     return (
  >  8 |         <Box span={3}>
       |              ^^^^
     9 |             <Description data="<h3><img class='margin-right padding-light' src='/assets/nn/images/globe.svg'>Recommendation #1</h3>" />
    10 |         </Box>
    11 |     )

ERROR in src/components/elements/Recommendations.tsx:9:13
TS2322: Type 'Element' is not assignable to type 'boolean'.
     7 |     return (
     8 |         <Box span={3}>
  >  9 |             <Description data="<h3><img class='margin-right padding-light' src='/assets/nn/images/globe.svg'>Recommendation #1</h3>" />
       |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    10 |         </Box>
    11 |     )
    12 | }

我做错了什么?
我期望没有类型错误,它将从BoxProps中获取类型。

u91tlkcl

u91tlkcl1#

一个修复方法是对组件进行类型转换并手动添加BoxProps

as React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLInputElement>>;

相关问题