我刚接触 typescript ，就犯了这个小错误。
（属性）数据：菜单项[]类型"{数据：菜单项目[];"}"不能赋给类型" IntrinsicAttributes & menuItems []"。类型" IntrinsicAttributes & menuItems []"上不存在属性" data "。ts（2322）
代码如下：https://codesandbox.io/s/data-is-not-a-function-ju21g6?file=/src/Settings.tsx
这是与第一个https://codesandbox.io/s/data-is-not-a-function-ju21g6?file=/src/TreeSettings.tsx:256-320组合的另一个
interface IMenuItems {
name: string;
level: number;
id: number;
pid: number;
children?: any[];
}
const Settings = () => {
const { flattenarr, zerotreetoarr } = useConvertTree();
const [data, setData] = useState<menuItems[]>([]);
useEffect(() => {
zerotreetoarr(tree.children as [], [0]);
setData(flattenarr);
}, []);
return <TreeSettings data={data} />;
};export interface IMenuItems {
name: string;
level: number;
id: number;
pid: number;
children?: any[];
}
const TreeSettings = (data: menuItems[]) => {
return (
<>
{data.map((t) => {
return <div>{t.name}</div>;
})}
</>
);
};The problem in Settings.tsx at <TreeSettings data={data} />; on data I get
(property) data: menuItems[]
Type '{ data: menuItems[]; }' is not assignable to type 'IntrinsicAttributes & menuItems[]'.
Property 'data' does not exist on type 'IntrinsicAttributes & menuItems[]'.ts(2322)我如何传递prop中的数据类型？
2条答案
按热度按时间1bqhqjot1#
你不能使用interface作为类型参数，但你可以像这样使用typeof IMENUItems：
bis0qfac2#
函数组件的定义与Typescript中的定义类似：
FC代表功能组件。它是一个泛型类型，允许您定义props的类型，在本例中为{data: menuItems[]}。然后，您可以解构属性，在本例中为：({data})，并推断出正确的类型。固定沙盒：https://codesandbox.io/s/data-is-not-a-function-forked-spp0xn?file=/src/TreeSettings.tsx
在您的示例中，您没有解构
props对象，而是将整个props对象声明为menuItems[]类型，这是不正确的。此行：
相当于
这会将具有
data属性的对象传递给功能组件。它不将数组作为参数传递。