typescript 将可选 prop 通过排列“ prop ”

2vuwiymt  于 2023-01-06  发布在  TypeScript
关注(0)|答案(1)|浏览(198)

我有一些嵌套的组件(这样就有了一个关注点分离),它们传递可选组件:

const FooBarMenu = ({ match }) => {
  return <div>
    {isFooBarLoadable ? (
      <FooBarLoader action={action} label='Foo Bar' selector={getLoadedFooBar}>
        <FooBar />
      </FooBarLoader>
    ) : <FooBarPlaceholder />}
  };

那么<FooBarLoader>看起来像这样:

type FooBarLoaderProps = {
  action: Function,
  children?: React.ReactNode,
  selector: (state: MyProjectState) => MightError<string>,
  props: {} // <-- this worked, but is where issues start
}

const FooBarLoader = ({
  action,
  children = undefined,
  selector,
  ...props
}: FooBarLoaderProps) => {

// do stuff to load FooBars (or not)

const error = useSelector(compose(getErrorFromState, selector));
// etc...

return (
  <LoadingSpinner
    error={error}
    {...props}
  >
    {children}
  </LoadingSpinner>
)

}

我们的LoadingSpinner如下所示:

type LoadingSpinnerProps = {
  children?: React.ReactNode,
  error?: string,
  label?: string,
  // etc... many more optional props
};

const LoadingSpinner = ({
  children = undefined,
  error = undefined,
  label = '...',
  // etc... many more props with defaults
}: LoadingSpinnerProps) => {
  // figure out if we needs to show an error etc
  // show label
  // Show spinning progress
};

问题是现在我正在转换javascript组件FooBarMenu以使用typescript,我看到FooBarLoader预期label作为props的一部分的问题,但这不适用于类型的声明方式?
我看到类型"IntrinsicAttributes & FooBarLoaderProps"上不存在"属性标签"。尝试在FooBarLoaderProps中使用props: Partial<{ label: string }>时仍然会发出不知道标签是什么的声音。
如果我有:

type FooBarLoaderProps = {
  action: Function,
  children?: React.ReactNode,
  selector: (state: MyProjectState) => MightError<string>,
  label?: string,
  props: {},
}

我提供了label,它抱怨我没有props prop (即使之前看起来很好?),相反,我需要将两者都标记为可选,这似乎忽略了label是 prop 的一部分这一点。
我应该如何声明FooBarLoaderProps类型,以便在props中包含可选的props?

byqmnocz

byqmnocz1#

您可能没有得到第二个错误,因为第一个错误阻止了它。
你声明了props,但是你没有使用它。组件中的...props和你类型中的props不一样。你可以随意命名第一个。
您的类型应如下所示:

type FooBarLoaderProps = {
  action: Function,
  children?: React.ReactNode,
  selector: (state: MyProjectState) => MightError<string>,
  label?: string,
  // list other props here
}

type FooBarLoaderProps = {
  action: Function,
  children?: React.ReactNode,
  selector: (state: MyProjectState) => MightError<string>,
  label?: string,
} & LoadingSpinnerProps

相关问题