[英]React Typescript: Type 'X' is not assignable to type 'IntrinsicAttributes & { properties }. TS2322
I'm trying to pass a prop to a menu item component but I get this error with the imageURL attribute:我正在尝试将道具传递给菜单项组件,但使用 imageURL 属性出现此错误:
Type '{ key: number; title: string; imageURL: string; }' is not assignable to type 'IntrinsicAttributes & { title: string; }'.
Property 'imageURL' does not exist on type 'IntrinsicAttributes & { title: string; }'. TS2322
It looks like there is a type mismatch for imageURL but I can't seem to find the solution.看起来 imageURL 的类型不匹配,但我似乎找不到解决方案。 Here are the relevant components:
以下是相关组件:
MenuItem.tsx菜单项.tsx
import React from 'react';
import './MenuItem.scss'
const MenuItem = ({ title }:{ title:string }) => (
<div className='menu-item'>
<div className='content'>
<h1 className='title'>{title}</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
);
export default MenuItem;
Directory.tsx目录.tsx
import React from 'react';
import './Directory.scss';
import MenuItem from '../menuItem/MenuItem';
type MenuItems = {
title:string;
imageURL:string;
id:number
};
class Directory extends React.Component<Object, any> {
constructor(props:object) {
super(props);
this.state = {
sections: [
{
title: 'category1',
imageURL: 'https://website1.com',
id: 1
},
{
title: 'category2',
imageURL: 'https://website2.com',
id: 2
},
{
...
}
]
};
};
render() {
return (
<div className='directory-menu'>
{
this.state.sections.map(({ title, imageURL, id }:MenuItems) => (
<MenuItem key={id} title={title} imageURL={imageURL} />
))
}
</div>
);
};
};
export default Directory;
You have just ({ title }:{ title:string })
as the props passed in for you're MenuItem component.您只有
({ title }:{ title:string })
作为传入的道具,您是 MenuItem 组件。 You need the props to match the type you're using in the component.您需要道具与您在组件中使用的类型相匹配。
This这个
const MenuItem = ({ title }:{ title:string }) => (
<div className='menu-item'>
<div className='content'>
<h1 className='title'>{title}</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
);
Should be应该
const MenuItem = (title,imageURL}:{title:string;mageURL:string}) => (
<div className='menu-item'>
<div className='content'>
<h1 className='title'>{title}</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.