反应 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) Property 'config' does not exist on type 'boolean | { config: Config; }'.ts(2339) 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: 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>;
};

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

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