第 5 行：道具驗證 react/prop-types 中缺少“標簽”

Question

當我編譯我的代碼時，ESlint 給了我這個警告。 我們正在使用 AirBNB 配置。

import React from 'react';
import { Link } from 'react-router-dom';

const ProfileInterestSkillButtons = ({
    tags, title, user, member,
}) => {

    return (
        <div>
           {title}
        </div>
    );
};

export default ProfileInterestSkillButtons;

Answer 1

您的組件正在使用從其父組件接收的名為tags的道具。

ESLint只是警告您在使用它的組件中為該道具定義類型檢查。 您可以使用PropTypes或flow 。

使用PropType的簡單示例為：

... // other imports
import PropTypes from 'prop-types';

... // your component declaration

ProfileInterestSkillButtons.propTypes = {
  tags: PropTypes.array.isRequired,
  title: PropTypes.string.isRequired,
  ... // and more
};

export default ProfileInterestSkillButtons;

PropType： https ：//reactjs.org/docs/typechecking-with-proptypes.html

流程： https ： //flow.org/en/docs/react/

Answer 2

使用流程

使用流對道具進行類型檢查的快速方法。

// @flow
import React from 'react';
import type { Node } from 'react';
import { SafeAreaView, ScrollView, StatusBar, StyleSheet } from 'react-native';

const ScreenDefaultView = (props: { layout: Node, scrollableLayout?: boolean } ) => {
    const layout = props.layout;
    const scrollableLayout = props.scrollableLayout;
    return ( ...

注意：為了添加可選參數或在 Flow 中調用，可以輸入? .

// scrollableLayout? is optional note the ? 
props: { layout: Node, scrollableLayout?: boolean }

流程文檔

• 謂詞函數