Что такое тип в React? - PullRequest
Новая
       27

Что такое тип в React?

0 голосов
/ 12 октября 2018

Ну, я видел этот фрагмент кода внизу, и я хотел бы знать, что на самом деле является 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;

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Вот полезный список проп-типов 

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

Это ожидаемые типы данных реквизита, которые, как ожидается, будут внутри компонента, обычно передаются в компонент.Неудачные проп-типы не должны ломать компонент, но будут показывать ошибку, предупреждая вас, что они потерпели неудачу ... Мы обычно просматриваем это в нашем консольном журнале ...

Кроме того, вы можете иметь тип проп-типа по умолчанию, например 

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;

Надеюсь, это поможет

0 голосов
/ 12 октября 2018

Это часть проверки типа потока.См. Документы: Псевдонимы типа

Если бы это был PropTypes, то это выглядело бы так: 

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