如果一个道具为真，则忽略其他反应道具

Question

我试图做到这一点，如果 on prop 为真，则所有其他人都将被忽略。我当前的反应代码如下所示：

<Component isTrue={true}/>
<Component foo='bar' someProp={true}/>;

但这会导致问题，因为在我的 Component.tsx 文件中 Props 接口

interface Props {
    isTrue?: boolean;
    foo?: string;
    someProp?: boolean;
}

Typescript 警告我道具可能未定义，我可以通过添加更多代码行来修复，但每次我制作新道具时都非常麻烦。

所以我想知道是否可以有单独的道具或其他东西来解决这个问题，在此先感谢:)

Answer 1

也许另一种方法是将组件属性类型的关注点分离到几个（私有）组件中。例如，对于

interface Props {
    isTrue?: boolean;
    foo?: string;
    someProp?: boolean;
}

对于Component，可以将所有道具直接给<Component isTrue={true/false} foo='bar' someProp={true}/>;作为可选道具
在 Component 中，检查 isTrue。 if (isTrue)、return 一个组件 <TrueComponent/>，您可以在其中忽略 TrueComponent
否则，return另一个组件<FalseComponent/>，你可以忽略这个isTrue道具，但需要所有其他道具。在 Component 中将有一层无法避免的非空 props 检查，但我认为这将是最小的工作量并且将是 type-safe.

Answer 2

所以，如果您不想要两个不同的组件，您可以这样做。

    export type IMyComponentPropsTruth = {
      isTrue: boolean;
    };
    export type IMyComponentPropsFalse = {
      foo: string;
      someProps: string;
    };
    
    export const MyComponent = (
      props: IMyComponentPropsTruth | IMyComponentPropsFalse
    ) => {
      const mytruthyProps = props as IMyComponentPropsTruth;
      const myfalseProps = props as IMyComponentPropsFalse;
      if (mytruthyProps && mytruthyProps.isTrue) {
        return <div>THE TRUTH IS OUT THERE</div>;
      } else {
        return (
          <div>
            keep looking {myfalseProps.foo} {myfalseProps.someProps}
          </div>
        );
      }
    };

import "./styles.css";
import { MyComponent } from "./MyComponent";

export default function App() {
  return (
    <>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
      <MyComponent isTrue={true} />
      <MyComponent foo="looked" someProps="404" />
    </>
  );
}

Answer 3

因为你写的是 Typescript warns me about the props maybe being undefined，我假设你基本上想传递至少一个 prop 给你的组件，但如果你传递更多，仍然需要检查其他的。您可以通过创建一个接口 T 和一个类型 OneOfObject 来做到这一点，这基本上使所有属性都是可选的（Partial），但至少需要一个道具（keyof T 的默认类型）。

TestComponent.tsx

type OneOfObject<T, U = {[K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U]

interface T {
    isTrue: boolean; //or isTrue: true (if you want to force it to true)
    foo: string;
    someProp: boolean;
}

const TestComponent = (props: OneOfObject<T>)=>{

  return (
  <div>{props.foo}</div>
  )
}

export default TestComponent

App.tsx

import React from "react";
import TestComponent from './TestComponent';

export default function App() {


  return (
    <div className="App">
      <TestComponent foo={`It's ok`}/>
    </div>
  );
}

你可以测试一下here。

如果一个道具为真，则忽略其他反应道具

Ignore other react props if one prop is true

typescript

reactjs

react-tsx