Zkontrolujte, zda v Reactu nejsou nadbytečné rekvizity (a ušetřete hodiny ladění)

Foto Nicole De Khors z Burst

Aktualizace pro rok 2022: TypeScript poskytuje tuto funkci ve výchozím nastavení při vytváření komponent v souborech .tsx. Takže pokud toto čtete a ještě nepoužíváte TypeScript, možná není vhodná doba to zkusit (už žádné proptypes, žádná další podivná nastavení).

V poslední době dělám stále více Reactu a kousl mě ošklivý zvyk:předávat neznámé rekvizity mým komponentám Reactu a divit se, proč to nefunguje 10 minut (NEBO VÍCE 😤). Pokud jste již nějaké React udělali, jsem si jistý, že pochopíte, co tím myslím.

  • Příběh ladění
  • eslint-plugin-react
  • Upozornění na neznámé prop (pouze komponenty DOM)
  • Řešení:prop-types-exact
    • Konfigurace ESLint
  • Shrnutí
  • Bonus:generování typů prop pomocí VSCode
  • Jdeme dále:Statická kontrola typu

Příběh ladění

Začněme příkladem.

V pondělí vytvořím novou vstupní komponentu:

// Input.js
import React from "react";
import PropTypes from "prop-types";

export default function Input({
  label,
  type
}) {
  return (<label>{label} <input type={type} /></label>)
}

Input.propTypes = {
  label: PropTypes.string,
  type: PropTypes.string
};

Používám to takto:<Input type="text" label="name" /> . Všechno dobré, tady je můj malý příspěvek se štítkem.

V úterý, po nějakém náročném kódovém odpoledni, se rozhodnu, že by mělo být labelText místo label (pojmenování je těžké). Dobře, změňme volací kód:<Input type="text" labelText="name" /> a teď vyměníme nářadí... "HEJTE SI DÁT KÁVU?" říká přítel? Určitě dobře...

⏳ O 30 minut později se vrátím ke kódování. "Dobře, podívejme se na tuto stránku, na které jsem pracoval... Hmm, proč to nefunguje? Proč je můj štítek prázdný?"

V konzoli není žádná chyba:

A:

"AH! Ano, ta rekvizita, to není správné jméno, napravme to... 😖"

Je snadné odhalit chybu, pokud to právě čtete, ale v reálném životě se mi to stává neustále:předání neznámých rekvizit komponentě React ve výchozím nastavení nespustí varování nebo chybu . A to je nepříjemné do té míry, že jsem potřeboval řešení.

Podívejme se, jak to můžeme vyřešit.

eslint-plugin-react

Již používám eslint-plugin-react a vřele jej doporučuji. Jeho doporučené nastavení aktivuje pravidlo pro typy rekvizit, které vás upozorní, pokud některé z vašich rekvizit chybí v definici typů rekvizit, jako je toto:

To je dobré a měli byste to používat, pokud se vám to líbí. Ale to nestačí, nebude vás to varovat před cizími rekvizitami, když používáte vaši součást. Pouze upozorní na chybějící ověření rekvizit.

Upozornění na neznámou prop (pouze komponenty DOM)

React má ve výchozím nastavení vestavěné upozornění na neznámou prop. Ale to funguje pouze na komponentách DOM. Pokud se tedy pokusíte použít <div someProp="yep"> upozorní vás:

(pouze pokud má vaše rekvizita velké písmeno, právě jsem to objevil 🤣)

Ale neupozorní vás na cizí vlastnosti vašich vlastních opakovaně použitelných komponent.

Řešení:prop-types-exact

Pojďme změnit naše předchozí Input.js komponenta pro použití airbnb/prop-types-exact:

// Input.js

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

import exactPropTypes from "prop-types-exact";

export default function Input({
  label,
  type
}) {
  return (<label>{label} <input type={type} /></label>)
}

Input.propTypes = exactPropTypes({
  label: PropTypes.string,
  type: PropTypes.string
});

Nyní obnovíme prohlížeč a stránku pomocí <Input type="text" labelText="name" /> :

🙌 PĚKNÉ! Nyní přímo vidím, že jsem předal nějakou rekvizitu, kterou moje součást nerozpoznala:rychlé a snadné ladění namísto prázdné konzole.

Konfigurace ESLint

Pokud začnete své proptypes zabalovat do exactPropTypes pak eslint-plugin-react již nebude rozpoznávat, kde jsou deklarovány vaše typy rekvizit. Chcete-li to opravit, přidejte propWrapperFunctions (eslint-plugin-react konfigurace) do nastavení ESLint:

{
  "settings": {
     "propWrapperFunctions": [
        "exactPropTypes"
      ]
   }
}

Souhrn

Pomocí React, Prop Types, ESLint a eslint-plugin-react můžete:

  • zjistit, že chybí proptype
  • zjistit, zda používáte prop na komponentě, která není definována jako proptype
  • vědět, kdy se proptypes ve vaší komponentě nepoužívá
  • zjistit, zda předáváte nesprávný proptype (např. číslo místo řetězce)

Bonus:generování typů prop pomocí VSCode

Existuje rozšíření, které můžete použít ke snadnému generování proptypes pomocí VSCode:React PropTypes Generate a vypadá takto:

Jdeme dále:Statická kontrola typu

Jak říká dokumentace Reactu, na větších kódových základnách vám může statická kontrola typu pomoci odhalit i tyto případy. Protože nepoužívám statickou kontrolu typu, nemohu vám říci, zda jsou pokryty všechny případy, které jsme viděli v tomto článku. Pokud používáte TypeScript nebo Flow, dejte mi vědět v komentářích, jaké máte zkušenosti s používáním cizích proptypes.

PS:Jak asi tušíte, přítel by vás nepřerušil uprostřed programování, ALE to je jen pro příběh 😘

Díky!