React 中的类型是什么？答案

【问题标题】：What is type in React?React 中的类型是什么？
【发布时间】：2019-03-17 19:15:24
【问题描述】：

好吧，我看到了下面的代码 sn-p，我想知道type Props 到底是什么？跟流量有关系吗？还是与道具类型有关？

如何在定义为类的组件中使用它？

我在此处找到的 React-Router 示例中看到了它：https://atlaskit.atlassian.com/packages/core/navigation

代码sn-p：

// @flow
import React from "react";
import { AtlassianIcon } from "@atlaskit/logo";
import Lorem from "react-lorem-component";
import Page from "@atlaskit/page";
import Navigation, { AkContainerTitle } from "@atlaskit/navigation";
import RouterLinkComponent from "./RouterLinkComponent";
import RouterLinkItem from "./RouterLinkItem";

// @flow

type Props = {
  title: string,
  currentPath: string
};

const PageNavigation = ({ title, currentPath }: Props) => (
  <Page
    navigation={
      <Navigation
        containerHeaderComponent={() => (
          <AkContainerTitle
            href="/iframe.html"
            icon={<AtlassianIcon label="atlassian" />}
            linkComponent={RouterLinkComponent}
            text="Dashboard"
          />
        )}
        globalPrimaryIcon={<AtlassianIcon label="Home" size="small" />}
        globalPrimaryItemHref="/iframe.html"
        linkComponent={RouterLinkComponent}
      >
        <RouterLinkItem
          text="Page 1"
          to="/page1"
          isSelected={currentPath === "/page1"}
        />
        <RouterLinkItem
          text="Page 2"
          to="/page2"
          isSelected={currentPath === "/page2"}
        />
        <RouterLinkItem
          text="Page 3"
          to="/page3"
          isSelected={currentPath === "/page3"}
        />
        <RouterLinkItem
          text="Page 4"
          to="/page4"
          isSelected={currentPath === "/page4"}
        />
      </Navigation>
    }
  >
    <div>
      <h1>{title}</h1>
      <Lorem count="30" />
    </div>
  </Page>
);

export default PageNavigation;

【问题讨论】：

跟道具类型有关。您为收到的每个属性定义数据类型，或者在反应中发送任何内容

标签： javascript reactjs atlaskit

【解决方案1】：

这是一个有用的道具类型列表

ComponentName.propTypes = {
  someVariablePropNameA: PropTypes.string.isRequired,
  someVariablePropNameB: PropTypes.object.isRequired,
  someVariablePropNameC: PropTypes.arrayOf(PropTypes.object).isRequired,
  someVariablePropNameD: PropTypes.number,
  someVariablePropNameE: PropTypes.bool
};

这些是预期在组件内部的 props 数据类型，通常传递到组件中。失败的 prop-types 不应该破坏组件，但会显示错误，警告你他们失败了......我们通常在控制台日志中查看这个......

另外，你可以有这样的默认道具类型

MatchRating.defaultProps = {
  someVariablePropNameA: "",
  someVariablePropNameB: {},
  someVariablePropNameC: [{}],
  someVariablePropNameD: 0,
  someVariablePropNameE: false
};

你需要像这样在你的标题中包含这个包

import PropTypes from "prop-types";

这只是测试错误的一种小方法。应始终使用。

现在来看一个完整的例子

import React, { PureComponent } from "react";
import PropTypes from "prop-types";

class ComponentName extends PureComponent {
}

ComponentName.propTypes = {

};

ComponentName.defaultProps = {

};

export default ComponentName;

希望对你有帮助

【讨论】：

【解决方案2】：

它是流类型检查器的一部分。查看文档：Type Aliases

如果是 PropTypes 那么它看起来像这样：

PageNavigation.propTypes = {
  title: string,
  currentPath: string
};

【讨论】：