reactjs - 需要一个参数取决于另一个参数的存在

Question

有一些带有多个 props 的 React 功能组件。

interface Props {
  data?: any;
  status?: string;
}

const Component: React.FunctionComponent<Props> = ({ data, status }) => {
  ...
};

我希望 status 属性依赖于 data 属性，所以你不能在没有 data status

<Component status={status} /> // error
<Component status={status} data={data} /> // ok

但是你仍然可以在没有 status 或者根本没有 props 的情况下使用 data

<Component data={data} /> // ok
<Component /> // ok

这可能吗？有没有一种方法可以编写满足这些要求的接口(interface)？或者也许其他方式？我自己无法解决。谢谢

Answer 1

您可以使用联合类型为对象建模，如果存在 status 并且 string 则 data 也必须存在。

type Props = {
  data: any;
  status?: string;
} | {
    status?: never
    data?: never
}

const Component: React.FunctionComponent<Props> = ({ data, status }) => {
  
};
const status = "ok";
const data = [{}]

let x = <Component status={status} /> // error
let y = <Component status={status} data={data} /> // ok

let z = <Component data={data} /> // ok
let u = <Component /> // ok

Playground Link