Quel est le proptype correct pour un arbitre dans Réagir?

Question

Je stocke un arbitre dans mon magasin redux et en utilisant mapStateToProps pour exposer l'arbitre pour les composants qui ont besoin d'accès à elle.

L'arbitre qui est stocké ressemble à:

Quel est le propType correct pour cet arbitre?

Answer 1

Réponse à la question spécifique décrit dans le post original

Dans l'OP question de l'exemple, il n'est pas la ref prop type qui doit être déclaré, mais les trucs signalé par l'arbitre, et qui sera passé de redux l'aide d' mapStateToProps. Prop pour un type d'élément du DOM serait: myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element) (si c'est un élément du DOM). Bien que, je voudrais:

1. Renommer la statique myElementToBePutInReduxGlobalStore (c'est pas une ref en soi)
2. Éviter de stocker non sérialisable données à l'intérieur de redux magasin
3. Éviter la transmission des éléments accessoires , comme expliqué par Réagir ingénieur Seb Markbage

---

Réponse à la question réelle

Q: Quelle est la bonne proptype pour une ref à Réagir?

Exemple de cas d'utilisation:

function FancyInput({ inputRef }) {
    return (
        <div className="fancy">
            Fancy input
            <input ref={inputRef} />
        </div>
    )
}

FancyInput.propTypes = {
    inputRef: ???   // What is the correct prop type here?
}

function App() {
    const inputRef = React.useRef()
    useEffect(function focusWhenStuffChange() => {
        inputRef.current && inputRef.current.focus()
    }, [stuff])
    return <FancyInput inputRef={inputRef} />
}

---

Aujourd'hui, deux types de références existent dans de réagir:

1. Un objet qui ressemble à ceci: { current: [something] }, généralement créé par React.createRef() accompagnateur ou l' React.useRef() crochet
2. Une fonction de rappel qui recevra [something] comme argument (comme celui de l'OP exemple)

Remarque: par le passé, vous pouvez également utiliser une chaîne de ref, mais il est considéré comme l'héritage et sera retiré de réagir

Le deuxième élément est assez simple et nécessite les éléments suivants prop type: PropTypes.func.

La première option est moins évident parce que vous pouvez spécifier le type de l'élément pointé par la réf.

TL;DR

Si vous n'attendez natif des éléments du DOM, comme un div ou input, la définition correcte est la suivante:

refProp: PropTypes.oneOfType([
    // Either a function
    PropTypes.func, 
    // Or the instance of a DOM native element (see the note about SSR)
    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
])

Réponse longue

ref peut pointer vers quelque chose d'autre qu'élément du DOM.

Si vous voulez être totalement flexible:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.any })
])

Ce que je viens d'applique la forme de l'objet ref w/ current de la propriété. Il va travailler à tout moment pour tout type de réf. Dans le but d'utiliser prop type, ce qui est une façon de repérer les incohérences lorsque vous développer, c'est probablement suffisant. Il semble très peu probable qu'un objet à la forme { current: [any] }, et est passé à un refToForward prop, serait de ne pas avoir de réelle réf.

Cependant, vous pouvez déclarer votre composant ne pas s'attendre à toute sorte de ref, mais seulement un certain type, compte tenu de ce qu'elle a besoin que la ref pour.

J'ai mis un bac à sable, mettant en valeur un peu différente façon de déclarer une ref, même certains non conventionnelle, puis de les tester avec de nombreux prop types. Vous pouvez le trouver ici.

---

Si vous attendre seulement une référence pointant vers un natif de l'élément d'entrée, pas tout HTML Element:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) })
])

Si vous attendre seulement une référence pointant vers une Réagir la classe de composant:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(Component) })
])

Si vous attendre seulement une référence pointant vers un élément fonctionnel à l'aide de useImperativeHandle d'exposer quelques-méthode publique:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.object })
])

Note: la prop type est intéressant car il couvre également réagir composants natifs et des éléments du DOM, car ils sont tous hériter de la base de javascript Object

---

Il n'y a pas une seule bonne façon de déclarer l'hélice de type pour une ref, ça dépend de l'utilisation. Si votre réf points à quelque chose de très identifié, il peut être intéressant d'ajouter un spécifique de type prop. Sinon, juste vérifier à la forme générale me semble assez.

---

Remarque à propos de rendu côté serveur

Si votre code est exécuté sur le serveur, sauf si vous êtes déjà polyfill DOM l'environnement, Element ou tout autre côté client type sera undefined en NodeJS. Vous pouvez utiliser la cale à l'appui:

Element = typeof Element === 'undefined' ? function(){} : Element

---

La suite Réagir Docs pages vous donnera plus d'informations sur la façon d'utiliser les références, à la fois objet et des rappels, et aussi comment utiliser useRef crochet

Réponse mise à jour merci à @Rahul Sagore, @Ferenk Kamras et @svnm

Answer 2

Très similaire au poste de @Pandaiolo,

``a maintenant été ajouté

Si l'utilisation de PropTypes a été ajoutée le `` 10 février 2019 dans ce

Answer 3

Je ne vérifie que pour la façon préférée et depuis PropType.object n'est pas très précieux, j'ai fini par utiliser ce: