反應 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>;
};