I am new to React. I have some code snippets written in React in which prop is passed from parent component to child component and I am using functional component ( const arrow function). However, there is a use of any keyword which I don't understand.
My parent component:
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>
);
};
My child component (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>
);
};
Here in sidebyside component, there is a use of props: any
which i dont understand what it is actually doing.
I just use props keyword until now to pass the props in components and render as props.name as an example.
This is a typescript type which supports all types of fields are receiving from another components
const SideBySide = (props: any) => {
But if you in react only you can remove type and use like
const SideBySide = (props) => {
TypeScript example
interface PersonProps {
name: string;
src: string;
age: number
}
let person: PersonProps = {
name: 'John',
src: 'http://...',
age: 30
}
but if you don't want to define field level type you can use any
like
let person: any = {
name: 'John',
src: 'http://...',
age: 30
}
For better understanding, refer TypeScript official documentation
"Any" is a typescript specific type. If you want to use dynamic types (like js) you can use "any". But i think if you use typescript, it is better to describe your types in your component. Like this:
const SideBySide = (props: {
title: string,
para1: string,
para2: string,
thumbnails: Array<{ src: string }>
}) => {
return (
...
);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.