0

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

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

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

代码片段：

// @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;
4

2 回答 2

5

它是流类型检查器的一部分。请参阅文档：类型别名

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

PageNavigation.propTypes = {
  title: string,
  currentPath: string
};
于 2018-10-12T14:24:33.247 回答
0

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

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

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

此外，您可以拥有像这样的默认道具类型

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;

希望这可以帮助

于 2018-10-12T15:00:47.850 回答