React组件中如何正确传递匹配InputType类型的参数？

错误原因 #

你的InputType是联合类型，要求必须是以下三种带明确标识键的对象之一：

• { configJsonUrl: string }
• { configJsObject: DataType }
• { rawData: { [key: string]: string } }

直接传递adhocData时，它只是普通键值对对象，没有联合类型要求的标识键（比如rawData），TypeScript无法将其识别为合法的InputType；而你尝试的rawData={adhocData}是错误地把rawData当成了组件props，但组件props只有input和formSubmitAction，因此不生效。

正确传递方式 #

需要把adhocData包装在包含rawData键的对象中，再赋值给组件的input props：

<Component 
  input={{ rawData: adhocData }} 
  formSubmitAction={func} 
/>

此时传递的input完全匹配InputType中{ rawData: { [key: string]: string } }的类型要求，TypeScript不会再报错。

其他类型的传递示例 #

如果需要使用InputType的其他分支，同样遵循“标识键+对应值”的结构：

• 使用configJsonUrl时：

  <Component 
    input={{ configJsonUrl: "/path/to/config.json" }} 
    formSubmitAction={func} 
  />
  

• 使用configJsObject时：

  const dataConfig: DataType = {
    id: "1",
    type: "test",
    configuration: { input: "demo" }
  };
  <Component 
    input={{ configJsObject: dataConfig }} 
    formSubmitAction={func} 
  />
  

内容的提问来源于stack exchange，提问作者moys