Après avoir utilisé réagir (en fait le réactif d'emballage ClojureScript) pendant un certain temps maintenant, je ne suis toujours pas sûr quelle est la meilleure façon de résoudre le problème suivant:la conception des composants en réaction, où mettre la «pleine hauteur»?
Supposons que vous auriez un composant racine:
class Root extends React.Component {
render() {
return (
<div style="display: flex">
<div style="flex: 2 1">
<Content></Content>
</div>
<div style="flex: 1 1">
<Menu></Menu>
</div>
</div>
);
}
}
Ceci sépare verticalement l'écran en une section de contenu plus grande et une section de menu plus petite. Je dirais que cette séparation est clairement quelque chose dont le composant Root devrait s'occuper. Le composant Menu lui-même peut être utilisé dans un autre contexte dans lequel les accessoires flex n'ont aucun sens. Le menu a cependant quelques propriétés qui lui appartiennent définitivement: comme par exemple la couleur d'arrière-plan. Mais si nous exécutons cet exemple, nous remarquerons que la couleur d'arrière-plan ne remplit pas la zone 'menu' définie dans les composants Root. C'est parce qu'il manque une certaine hauteur/largeur = "100%" propriétés de style.
Je vois deux façons de résoudre cela: Soit les mettre dans le composant Menu. Mais cela pourrait aussi ne pas être destiné à d'autres utilisations du composant. Si quelqu'un veut utiliser Menu pas dans toute sa hauteur il devrait être enveloppé à nouveau. Ou, passez la largeur et la hauteur comme accessoires au composant, c'est aussi un peu overhead ...
Habituellement, les menus ne sont pas réutilisés, mais ce modèle se pose dans de nombreuses autres situations. Quel est le chemin pour aller ici? Y a-t-il peut-être une troisième façon de faire cela?
EDIT/REMARQUE:
Peut-être transferPropsTo est ce que je dois, mais je serais toujours laisser cela à la discussion ...