时间戳

首页 > 解决方案 > 如何将接口对象和其他类型的对象传递给 React 中的功能组件？

reactjs - 如何将接口对象和其他类型的对象传递给 React 中的功能组件？

问题描述

假设我有一个界面

interface Setting {
    desc: string,
    title: string,
    value: string | number | boolean | number[] | float,
    value_type: "string" | "integer" | "bool" | "list" | "float"
}

以及一个接受两个参数的功能组件

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

这样的函数签名对 TypeScript 编译器来说似乎很好。

接下来，我尝试调用组件，<SettingsOption {...option} test=""/>但它说

type '{ test: string; desc: string; title: string; value: string | number | boolean | number[]; value_type: "string" | "float" | "integer" | "bool" | "list"; }' is not assignable to type 'IntrinsicAttributes & Setting'.
  Property 'test' does not exist on type 'IntrinsicAttributes & Setting'.ts(2322)

我的问题：有没有办法通过传递所有必要的信息来调用这样的组件？

标签： reactjstypescriptreact-functional-component

解决方案

你必须注意一些要点。

  1. 在 React 功能组件中，第一个参数是组件 props，第二个参数是Forwarding refs to DOM components。
  2. 您在 JSX 元素中传递的所有属性都将像porps在组件中一样接收。

所以你不能有test第二个参数。此外，如果您test在 JSX 元素中用作属性，SettingsOption将在道具中获取它。因此，您会收到该错误。

interface Setting {
    desc: string,
    title: string,
    test: string;
    value: string | number | boolean | number[] | float,
    value_type: "string" | "integer" | "bool" | "list" | "float"
}

const SettingsOption = ({ ...option }: Setting): JSX.Element => {return (...)}

或者，您可以将其作为函数调用并传递所有必要的参数，而不是将功能组件用作元素：

return (
    <div>
        {SettingsOption(option, "test")}
    </div>
)

Rendered more times than during previous render但是如果您的组件使用钩子，这种方法可能会导致上升。

推荐阅读