reactjs 根据react组件的其他属性定义可选属性

t3irkdon  于 2022-12-18  发布在  React
关注(0)|答案(3)|浏览(111)

我有一个具有加载状态的组件,并且我有isLoading属性来确定该组件是否正在加载:

interface CustomImageComponentProps {
    isLoading:boolean
    src:string
    description:string
}

export const MyCustomImage = ({isLoading}:CustomImageComponentProps) => {

   
    return (
        <If condition={isLoading} OnTrue={
            <Shimmer/>
        } OnFalse={//other content}/>

    );
});

基本上,如果isLoading是真的,我想让其他的props成为可选的。我如何使用typescript实现这个行为?

yjghlzjz

yjghlzjz1#

这是我如何做的。一个正在加载的布局来 Package 我的一些组件。如果加载为真,组件将不会显示。如果你不喜欢这个,还有另一种方法。你可以使用style={{display: loading ? 'none' : 'flex'}}

interface LoadingLayoutProps extends ELoadingProps {
  loading?: boolean;
  LoadingComponent?: React.ReactNode;
  children?: any;
  // other props
}

function LoadingLayout(props: LoadingLayoutProps) {
  const { loading = false, LoadingComponent = <ActivityIndicator />, children } = props;

  if (loading) {
    return (
      <LoadingComponent />
    );
  }

  return <>{children}</>;
}

function App() {
  const [state,setState] = React.useState(true);

  return (
    <LoadingLayout loading={loading}>
      <YourOtherComponents />
    </LoadingLayout>
  )
}
oyxsuwqo

oyxsuwqo2#

嗨@reza47,

如果我没理解错的话。那么,这是一个让你满意的答案。当然。
如果你想让 prop 成为可选的,只要当isloading为真。那么,你需要像这样多做一点工作。

type RequiredProps = {
  src: string;
  description: string;
}

我不确定。但是,RequiredProps覆盖了我的CustomImageComponentProps代码。我不知道它是如何工作的。如果有人知道这件事。那么,我将感谢任何人的答复。

interface CustomImageComponentProps {
  isLoading: boolean;
  src?: string;
  description?: string;
} & (isLoading extends false ? RequiredProps : {})

但问题是CustomImageComponentProps需要的是加载条件。这并不意味着。
不需要隐式导入isLoading组件,就可以在CustomImageComponentProps接口的类型Assert中使用它。
在TypeScript中,值的类型由保存该值的变量的类型确定,而不是由值本身确定。

vfwfrxfs

vfwfrxfs3#

类型系统术语表示您所需要的是“区分联合”,其中一个值可以是两个或多个类型中的一个,由一个类型的值确定。

type LoadedImage = {
  isLoading: false;
  src: string;
  description: string;
}

type PendingImage = {
  isLoading: true;
  src?: string;
  description?: string;
}

type CustomImageComponentProps = LoadedImage | PendingImage

现在如果isLoading是false,你(和typescript)知道srcdescription是可用的。如果你不检查isLoading,你仍然必须处理未定义srcdescription的可能性,或者至少你必须关闭typescript警告。

相关问题