React 功能组件中的 Prop 名称

Question

我是 React 新手。我有一些用 React 编写的代码片段，其中 prop 从父组件传递到子组件，我正在使用功能组件（ const 箭头函数）。但是，any 关键字 的用法我不明白。

我的父组件：

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

我的子组件（并排）：

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

在并排组件中，有一个 props: any 的用法，我不明白它实际上在做什么。

直到现在我只是使用 props 关键字来传递组件中的道具并渲染为 props.name 作为示例。

Answer 1

这是一个打字稿类型，支持从其他组件接收的所有类型的字段

const SideBySide = (props: any) => {

但是如果你只在 React 中，你可以删除类型并使用 like

const SideBySide = (props) => {

TypeScript 示例

interface PersonProps {
 name: string;
 src: string;
 age: number
}
let person: PersonProps = {
  name: 'John',
  src: 'http://...',
  age: 30
}

但如果您不想定义字段级别类型，您可以使用 any like

let person: any = {
  name: 'John',
  src: 'http://...',
  age: 30
}

为了更好的理解，参考TypeScript official documentation

Answer 2

“Any”是打字稿特定类型。如果你想使用动态类型（比如 js），你可以使用“any”。但我认为如果你使用打字稿，最好在你的组件中描述你的类型。像这样：

const SideBySide = (props: {
 title: string,
 para1: string,
 para2: string,
 thumbnails: Array<{ src: string }>
}) => {
   return (
     ...
   );
 };

React 功能组件中的 Prop 名称

Prop name in functional component in React

javascript

reactjs

react-native

react-props

react-component