reactjs - React Typescript: Type 'X' is not assignable to type 'IntrinsicAttributes & { properties }. TS2322

Question

I'm trying to pass a prop to a menu item component but I get this error with the imageURL attribute:

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. Here are the relevant components:

MenuItem.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

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;

标签： reactjstypescript

Answer 1

您就像({ title }:{ title:string })为您传递的道具一样是 MenuItem 组件。您需要道具与您在组件中使用的类型相匹配。

这个

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>
);

应该

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>
);