[英]Prop name in functional component in React
我是 React 的新手。 我有一些用 React 编写的代码片段,其中 prop 从父组件传递到子组件,并且我使用的是函数组件(const 箭头函数)。 但是,有使用任何我不明白的关键字。
我的父组件:
const text = {
title: "We Made Always Provide Quality Items",
para1:
"Excepteur sint occaecat cupidatat non proident sunt iculpa qui officia deserunt mollit anim est. . ",
para2:
"Dicta sunt explicabo. nemo enuam eius .",
thumbnails: [{ src: "" }],
};
const AboutPage = () => {
return (
<div className="about-page">
<PageHeader
title={titleContent.title}
subtitle={titleContent.subtitle}
btnText="">
<StatsCards stats={stats} />
</PageHeader>
<WhyUs />
<SideBySide {...text} />
<Chefs chefs={chefs} />
<ContentE />
</div>
);
};
我的子组件(SideBySide):
const SideBySide = (props: any) => {
return (
<div className="side-by-side">
<div className="container">
<div className="left-side">
<div className="title">
<div className="main-title">{props.title}</div>
</div>
<div className="description">
<p>{props.para1}</p>
<p>{props.para2}</p>
</div>
{/* Link to about us */}
<Link to="/menu">
<ExploreButton active="link-active">More About Us</ExploreButton>
</Link>
</div>
<div className="right-side">
<div className="image">
{props.thumbnails.map((thumbnail: any, index: number) => {
return (
<img
src={thumbnail.src}
alt=""
key={index}
className={`img-${index}`}
/>
);
})}
</div>
</div>
</div>
</div>
);
};
在 sidebyside 组件中,使用了props: any
我不明白它实际在做什么的东西。
到目前为止,我只是使用 props 关键字在组件中传递 props 并渲染为 props.name 作为示例。
这是一个打字稿类型,它支持从另一个组件接收的所有类型的字段
const SideBySide = (props: any) => {
但是如果你只反应,你可以删除类型并使用像
const SideBySide = (props) => {
打字稿示例
interface PersonProps {
name: string;
src: string;
age: number
}
let person: PersonProps = {
name: 'John',
src: 'http://...',
age: 30
}
但如果您不想定义字段级别类型,您可以使用any
类似
let person: any = {
name: 'John',
src: 'http://...',
age: 30
}
为了更好的理解,参考TypeScript 官方文档
“任何”是打字稿特定类型。 如果你想使用动态类型(比如 js),你可以使用“any”。 但我认为如果您使用打字稿,最好在您的组件中描述您的类型。 像这样:
const SideBySide = (props: {
title: string,
para1: string,
para2: string,
thumbnails: Array<{ src: string }>
}) => {
return (
...
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.