无法映射组件属性



我正在向链接到故事书的组件传递道具。问题是我传递的对象没有映射。上面写着

CCD_ 1。

所以我认为我的对象不是一个";阵列";然而,我尝试修复,直到代码看起来像这样。

Works.mocks.ts

import { ImgixImage } from '@/model/storage';
import { IWorks } from './Works';
const base: IWorks = [
{
projectID: 1,
projectName: 'Project - 1',
projectPic: { url: ImgixImage.main_portfolio1, width: 360, height: 480 },
projectDesc:
'Project - 1 || Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.',
},
{
projectID: 2,
projectName: 'Project - 2',
projectPic: { url: ImgixImage.main_portfolio2, width: 360, height: 480 },
projectDesc:
'Project - 2 || Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.',
},
{
projectID: 3,
projectName: 'Project - 3',
projectPic: {
url: 'https://dummyimage.com/720x400',
width: 360,
height: 480,
},
projectDesc:
'Project - 3 || Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.',
},
];
export const mockWorksProps = {
base,
};

Works.tsx

import Image from 'next/image';
interface project {
projectID: number;
projectName: string;
projectPic: { url: string; width: number; height: number };
projectDesc: string;
}
export interface IWorks extends Array<project> {}
const Works: React.FC<IWorks> = (works: IWorks) => {
const data = works;
return (
<div className="">
<div className="">
<div className="">
{data.map(({ projectID, projectName, projectPic, projectDesc }) => (
<div key={projectID} className="">
<div className="">
<Image
className=""
src={projectPic.url}
width={projectPic.width}
height={projectPic.height}
alt="https://dummyimage.com/360x480"
/>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default Works;

Works.tstories.tsx

import { ComponentMeta, ComponentStory } from '@storybook/react';
import Works, { IWorks } from './Works';
import { mockWorksProps } from './Works.mocks';
export default {
title: 'templates/Works',
component: Works,
argTypes: {},
} as ComponentMeta<typeof Works>;
const Template: ComponentStory<typeof Works> = (args) => <Works {...args} />;
export const Base = Template.bind({});
Base.args = {
...mockWorksProps.base,
} as IWorks;

需要将道具固定为";数组"?非常感谢任何形式的帮助

React组件将props对象作为参数,而不是直接的prop值。在Works中,您已将整个道具对象命名为worksworks应该是props对象的属性。
interface project {
projectID: number;
projectName: string;
projectPic: { url: string; width: number; height: number };
projectDesc: string;
}
export interface IWorks {
works: Array<project>;
}
const Works: React.FC<IWorks> = ({ works }: IWorks) => {
return (
<div className="">
<div className="">
<div className="">
{works.map(({ projectID, projectName, projectPic, projectDesc }) => (
<div key={projectID} className="">
<div className="">
<Image
className=""
src={projectPic.url}
width={projectPic.width}
height={projectPic.height}
alt="https://dummyimage.com/360x480"
/>
</div>
</div>
))}
</div>
</div>
</div>
);
};

import { ComponentMeta, ComponentStory } from '@storybook/react';
import Works, { IWorks } from './Works';
import { mockWorksProps } from './Works.mocks';
export default {
title: 'templates/Works',
component: Works,
argTypes: {},
} as ComponentMeta<typeof Works>;
const Template: ComponentStory<typeof Works> = (args) => <Works {...args} />;
export const Base = Template.bind({});
Base.args = {
works: mockWorksProps.base, // <-- pass a works prop
} as IWorks;

最新更新