PropTypes ในองค์ประกอบไร้สถานะที่ใช้งานได้

โดยไม่ต้องใช้คลาสฉันจะใช้ PropTypes ในส่วนประกอบที่ไม่ระบุสถานะของการตอบสนองได้อย่างไร

export const Header = (props) => (
   <div>hi</div>
)

เอกสารอย่างเป็นทางการแสดงให้เห็นว่าการทำเช่นนี้กับชั้นเรียนส่วนประกอบ ES6 แต่เช่นเดียวกับชิ้นส่วนการทำงานไร้สัญชาติ

ประการแรกnpm install/ ใหม่ prop-ประเภทแพคเกจถ้าคุณยังไม่ได้yarn add

จากนั้นเพิ่ม propTypes ของคุณ (และ defaultProps ด้วยหากจำเป็น) หลังจากกำหนดส่วนประกอบการทำงานแบบไม่ระบุสถานะแล้วก่อนที่คุณจะส่งออก

import React from "react";
import PropTypes from "prop-types";

const Header = ({ name }) => <div>hi {name}</div>;

Header.propTypes = {
  name: PropTypes.string
};

// Same approach for defaultProps too
Header.defaultProps = {
  name: "Alan"
};

export default Header;

ไม่แตกต่างกับ stateful คุณสามารถเพิ่มได้เช่น:

import PropTypes from 'prop-types';
Header.propTypes = {
  title: PropTypes.string
}

นี่คือลิงค์ไปยังprop-types npm

วิธีเดียวกับที่คุณทำในส่วนประกอบตามคลาส:

   import PropTypes from 'prop-types';

   const funcName = (props) => {
       ...
   }
   funcName.propTypes = {
       propName: PropTypes.string.isRequired
   }

หมายเหตุ: คุณอาจต้องติดตั้งprop-typesผ่านnpm install prop-typesหรือyarn add prop-typesขึ้นอยู่กับเวอร์ชัน React ที่คุณใช้

ทำเช่นเดียวกับที่คุณทำกับ Class Based Components

import PropTypes from "prop-types";

    const = function_name => {}

    function_name.propTypes = {
       prop_name : PropTypes.number
       . . . . . . . . . . . . . .
    }

หวังว่านี่จะช่วยได้!

ตั้งแต่React 15ใช้propTypesเพื่อตรวจสอบอุปกรณ์ประกอบฉากและจัดเตรียมเอกสารด้วยวิธีนี้:

import React from 'react';
import PropTypes from 'prop-types';

export const Header = (props={}) => (
   <div>{props}</div>
);
Header.propTypes = {
  props: PropTypes.object
};

รหัสนี้อยู่บนสมมติฐานของค่าเริ่มต้นprops={}หากไม่มีอุปกรณ์ประกอบฉากให้กับส่วนประกอบ