React中如何向函数组件传递interface定义的对象及其他类型参数

• React函数组件仅支持接收一个props对象作为入参，所有在JSX标签上声明的属性都会被合并到这个props对象中。你定义的第二个test参数不符合React组件的入参规则，属于普通函数的参数写法，无法在JSX调用时通过属性传入。
• 你当前为组件声明的props类型只有Setting，自然不存在test属性，所以TS会抛出类型不匹配的报错。
• 额外注意：TS原生没有float类型，你定义的Setting接口中的float需要替换为number，否则会有隐式any的风险。

方案1：扩展props类型（最常用） #

把test属性加入到组件的props类型定义中即可，不需要修改原Setting接口也可以直接用交叉类型实现：

// 组件入参调整为单个props对象，类型为Setting和test属性的交叉类型
const SettingsOption = ({ test, ...option }: Setting & { test: string }): JSX.Element => {
  return (...)
}

修改后即可用你原来的写法正常调用：

<SettingsOption {...option} test=""/>

如果需要复用这个props类型，也可以单独定义接口：

interface SettingsOptionProps extends Setting {
  test: string
}
const SettingsOption = ({ test, ...option }: SettingsOptionProps): JSX.Element => {
  return (...)
}

方案2：特殊场景下的参数传递 #

如果确实不想把test放在props里（不推荐），也可以把组件改成普通函数调用，但会丢失JSX的组件特性：

{SettingsOption(option, "test内容")}

这种写法不符合React组件的使用规范，仅做了解，优先选方案1。

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