PropTypes in funktionaler zustandsloser Komponente

102

Wie verwende ich PropTypes ohne Verwendung einer Klasse in einer funktionalen zustandslosen Komponente von reag?

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

— Alan Jenshen
quelle

140

Die offiziellen Dokumente zeigen, wie dies mit ES6-Komponentenklassen gemacht wird. Gleiches gilt jedoch für zustandslose Funktionskomponenten.

Erstens npm install/ yarn adddas neue Prop-Typ-Paket, falls Sie es noch nicht getan haben.

Fügen Sie dann Ihre propTypes (und bei Bedarf auch defaultProps) hinzu, nachdem die zustandslose Funktionskomponente definiert wurde, bevor Sie sie exportieren.

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
quelle

Was für ein Vorteil davon? Es würde auch ohne definierte propTypes funktionieren.

— Yarik

Danke, ich dachte, es wäre nur für Klassenkomponenten.

— Doug

1

@Yarik Durch die Verwendung von propTypes werden einige automatische Überprüfungen für Sie durchgeführt. Sie erhalten jedes Mal eine Warnung, wenn Ihr Code "den Vertrag bricht".

— Iulius Curt

25

Es ist nicht anders mit dem Stateful, Sie können es hinzufügen wie:

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

Hier ist ein Link zu den Requisitentypen npm

— Ich Putu Yoga Permana
quelle

2

Wenn Sie neuere Versionen von React verwenden, möchten Sie diese jedoch selbst importieren. PropTypesIn diesem Fall möchten Sie Reacttitle: PropTypes.string

— aufhören

0

Genauso wie bei klassenbasierten Komponenten:

   import PropTypes from 'prop-types';

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

Hinweis: Je nach verwendeter React-Version müssen Sie möglicherweise prop-typesüber npm install prop-typesoder installieren yarn add prop-types.

— lokeshj
quelle

0

Dies geschieht genauso wie bei klassenbasierten Komponenten

import PropTypes from "prop-types";

    const = function_name => {}

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

Hoffe das hilft !

— Ashutosh Tiwari
quelle

0

Verwenden Sie seit React 15 Folgendes , propTypesum Requisiten zu validieren und Dokumentation bereitzustellen:

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

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

Dieser Code unter der Annahme eines Standardwerts, props={}wenn der Komponente keine Requisiten zur Verfügung gestellt wurden.

— kirill .z
quelle