La même info-bulle d'amorçage pour toutes les entrées désactivées/ReactJS

Question

Quelle est la meilleure façon d'initialiser Tooltip dans un composant de réaction et de l'activer sur toutes les entrées désactivées, comme un appel unique global. C'est-à-dire "Ceci ne peut pas être édité" à chaque fois que vous survolez TOUTE entrée désactivée.

Mon but est de ne pas avoir à envelopper chacun des centaines d'entrées individuellement comme ceci:

<Tooltip> 
    <input/> 
</Tooltip> 

Answer 1

Faire un composant Input, passer un accessoire bool, quelque chose comme showValidationMessageAsTooltip, et, à l'intérieur Input comp,. si showValidationMessageAsTooltip est vrai, envelopper le Input comp. avec Tooltip.

Exemple de code:

return (
    showValidationMessageAsTooltip ? <Tooltip><input {...props}/></Tooltip> : <input {...props} /> 
); 

De cette façon, vous devrez seulement passer un accessoire bool supplémentaire. PS: Il existe d'autres manières, encore plus efficaces, en particulier si vous avez une configuration de formulaire où chaque champ de formulaire a un composant défini pour lui et chaque champ de formulaire peut avoir plusieurs HOC (compositions d'ordre supérieur) définies dans le forme config (un tableau d'objets, fondamentalement) ainsi. Mais, pour l'instant, jusqu'à ce que vous plongiez plus profondément dans des choses comme redux-form, etc., je suggère de s'en tenir à la solution la plus simple.