PropTypes dalam komponen stateless fungsional

103

Tanpa menggunakan class, bagaimana cara menggunakan PropTypes dalam komponen stateless fungsional react?

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

— Alan Jenshen
sumber

141

Dokumen resmi menunjukkan bagaimana melakukan ini dengan kelas komponen ES6, tetapi hal yang sama berlaku untuk komponen fungsional tanpa negara.

Pertama, npm install/ yarn addyang prop-jenis baru mengemas jika Anda belum melakukannya.

Kemudian, tambahkan propTypes Anda (dan defaultProps juga jika diperlukan) setelah komponen fungsional tanpa status telah ditentukan, sebelum Anda mengekspornya.

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;

— Michael
sumber

Apa untungnya melakukan itu? Ini akan bekerja tanpa propTypes yang ditentukan juga.

— Yarik

Terima kasih, saya pikir itu hanya untuk komponen kelas.

— Doug

1

@Yarik Dengan menggunakan propTypes Anda mendapatkan beberapa pemeriksaan otomatis dilakukan untuk Anda. Anda akan mendapatkan peringatan setiap kali kode Anda "melanggar kontrak".

— Iulius Curt

26

Tidak berbeda dengan stateful, Anda dapat menambahkannya seperti:

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

Berikut ini tautan ke prop-types npm

— I Putu Yoga Permana
sumber

2

Meskipun jika Anda menggunakan versi yang lebih baru dari React, Anda akan ingin mengimpornya PropTypessendiri dalam hal ini Anda ingin berhenti Reactdan langsung sajatitle: PropTypes.string

— terbang

1

Cara yang sama Anda lakukan di komponen berbasis kelas:

   import PropTypes from 'prop-types';

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

Catatan: Anda mungkin harus menginstal prop-typesmelalui npm install prop-typesatau yarn add prop-types, tergantung pada versi React yang Anda gunakan.

— lokeshj
sumber

0

Ini dilakukan dengan cara yang sama seperti yang Anda lakukan dengan Komponen Berbasis Kelas

import PropTypes from "prop-types";

    const = function_name => {}

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

Semoga ini membantu !

— Ashutosh Tiwari
sumber

0

Sejak React 15 , gunakan propTypesuntuk memvalidasi props dan sediakan dokumentasi dengan cara ini:

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

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

Kode ini menggunakan asumsi nilai default props={}jika tidak ada props yang diberikan ke komponen.

— kirill .z
sumber