具有多种道具类型的 React Typescript 组件

Question

我有以下组件，它将采用一个配置对象，该对象可以是一个包含 name 属性的对象，它将是一个字符串，或者在这种情况下是一个布尔值配置对象尚未填充。

type Config = {
  name: string;
};

const Widget = ({ config }: { config: Config } | boolean) => {
  return <p>{config.name}</p>;
};

export default function App() {
  let config = {
    name: "Bob"
  };
  // config = false;
  return (
    <div>
      <h1>Name:</h1>
      {config && <Widget config={config} />}
    </div>
  );
}

TS 抱怨 Property 'config' does not exist on type 'boolean | { config: Config; }'.ts(2339)。什么是正确的 TS 修复？似乎用 any 类型注释它似乎确实有效，但我显然想避免这种情况。

Answer 1

我认为您只能使用 null 来解决您的问题。您的代码如下所示：

   type Config = {
        name: string
    }
    
    const Widget = (config : Config | null) => {
    
        if(!config) {
           return !--- not populated config code
        } else {
            <p>{config.name}</p>;
        }
    };

Answer 2

错误与boolean有关。

在制作参数 { config }: { config: Config } | boolean 时，您说的是：

参数可能是{ config: Config }，或者
参数可能是boolean.

对于JSX组件，参数是对象形式的道具。在什么情况下 JSX props 会是布尔值？绝不。所以这可能是错误。

改为：

const Widget = ({ config }: { config: Config }) => {
  return <p>{config.name}</p>;
};

或者如果您希望配置是可选的：

const Widget = ({ config }: { config?: Config }) => {
  return <p>{config.name}</p>;
};

或者如果您希望配置有时出于某种原因接受 true/false（您可能不想这样做）：

const Widget = ({ config }: { config: Config | boolean }) => {
  return <p>{config.name}</p>;
};

具有多种道具类型的 React Typescript 组件

React Typescript Component with Multiple Prop Types

typescript

reactjs

typescript-typings

react-typescript