Question

我真的很头疼！！我一直在努力解决这个问题，但无济于事！

错误：输入'{ fieldHandler: (e: any) => void; getBrands：功能；品牌：品牌[]； }' 缺少“BrandProps”类型的以下属性：error、errorHandler、nav、navHandler TS2739

我有一个父组件将 props 传递给子组件，还有一个高阶组件将额外的 props 传递给同一个子组件。

父组件返回

return (
    <Fragment>
      <Brands
        fieldHandler={fieldHandler}
        getBrands={get_brands}
        brands={brands}
      />
    </Fragment>
  );

高阶组件

export type WrapperProps = {
  error?: boolean;
  errorHandler?: Function;
  nav?: object;
  navHandler?: Function;
};

const stepsHoc = <P extends WrapperProps>(
  OriginalComponent: React.ComponentType<P>
): React.FunctionComponent<P> => {
  const NewComponent: React.FC<P & WrapperProps> = props => {
    const [error, errorHandler] = useState<boolean>(false);
    const [nav, navHandler] = useState<object>({
      next: null,
      previous: null
    });

    return (
      <OriginalComponent
        error={error}
        errorState={errorHandler}
        nav={nav}
        navHandler={navHandler}
        {...(props as P)}
      />
    );
  };
  return NewComponent;
};

export default stepsHoc;

子组件

interface IBrand {
  id: number;
  name: string;
}

interface BrandProps {
  error: boolean;
  errorHandler: Function;
  nav: object;
  navHandler: Function;
  fieldHandler: Function;
  getBrands: Function;
  brands: IBrand[];
}

const Brands: React.FC<BrandProps> = ({
  fieldHandler,
  getBrands,
  brands,
  error,
  errorHandler,
  nav,
  navHandler
}) => {

// * Note logging of error in child = false 
  console.log('Log = ', error); 

  return (
    <Fragment>
    </Fragment>
  );
};

export default StepsHoc(Brands);

Answer 1

您的问题是您传递给子组件的道具。

根据您的孩子的定义，这些是组件必须接收的道具：

interface BrandProps {
  error: boolean;
  errorHandler: Function;
  nav: object;
  navHandler: Function;
  fieldHandler: Function;
  getBrands: Function;
  brands: IBrand[];
}

在您的父组件中，您只传递其中的 3 个：

<Brands
        fieldHandler={fieldHandler}
        getBrands={get_brands}
        brands={brands}
      />

在 HOC 中，额外的属性可以是可选的（因此它们可能不存在，这是错误的原因）。

所以要解决这个问题，您可以将 BrandProps 接口上的额外属性设置为可选，方法是使用“?”定义它们，例如 error?: boolean;，或者您可以根据需要添加它们他们必须通过

类型 '{}' 缺少类型 ''" 中的以下属性

1 个答案: