İşlevsel durum bilgisi olmayan bileşende PropTypes

107

Sınıfı kullanmadan, PropTypes'i react'in işlevsel durumsuz bileşeninde nasıl kullanırım?

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

— Alan Jenshen
kaynak

148

Resmi belgeler ES6 bileşen sınıfları ile bunu nasıl gösterir, ancak aynı vatansız fonksiyonel bileşenler için de geçerlidir.

Öncelikle, npm install/ yeni prop-tipleri paketlemek zaten değil varsa.yarn add

Ardından, durum bilgisi olmayan işlevsel bileşen tanımlandıktan sonra, dışa aktarmadan önce propTypes (ve gerekirse defaultProps) ekleyin.

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
kaynak

Bunu yapmanın ne faydası var? Tanımlanmış propType olmadan da çalışacaktır.

— Yarik

1

Teşekkürler, sadece sınıf bileşenleri için olduğunu sanıyordum.

— Doug

3

@Yarik propTypes kullanarak sizin için bazı otomatik kontroller yaptırırsınız. Kodunuz her "sözleşmeyi ihlal ettiğinde" bir uyarı alırsınız.

— Iulius Curt

27

Durum bilgisi farklı değildir, şöyle ekleyebilirsiniz:

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

Burada prop türlerine bir bağlantı npm

— Ben Putu Yoga Permana
kaynak

2

Eğer Tepki daha yeni sürümlerini kullanıyorsanız rağmen İçe isteyeceksiniz PropTypeskapalı ayrılmak isteyeceksiniz bu durumda kendi başına Reactve sadece vartitle: PropTypes.string

— flyingace

1

Sınıf tabanlı bileşenlerde yaptığınız gibi:

   import PropTypes from 'prop-types';

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

Not: Kullandığınız React sürümüne bağlı olarak veya prop-typesaracılığıyla yüklemeniz gerekebilir .npm install prop-typesyarn add prop-types

— Lokeshj
kaynak

1

Sınıf Tabanlı Bileşenlerde yaptığınız gibi yapılır

import PropTypes from "prop-types";

    const = function_name => {}

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

Bu yardımcı olur umarım !

— Ashutosh Tiwari
kaynak

-1

React 15'ten bu yana , propTypessahne donanımlarını doğrulamak ve belgeleri şu şekilde sağlamak için kullanın :

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

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

Bu kod props={}, bileşene hiçbir sahne sağlanmadıysa varsayılan değer varsayımına dayanır .

— kirill .z
kaynak