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>
)

javascript reactjs react-props react-proptypes 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

PropTypes dalam komponen stateless fungsional

Jawaban: