Comment obtenir une réagir la composante de la taille (hauteur/largeur) avant de rendre?
J'ai une réagir composant qui a besoin de connaître ses dimensions à l'avance, avant qu'elle se rend elle-même.
Quand je ferais un widget jquery je pouvais juste $('#container').width()
et obtenir la largeur du conteneur à l'avance quand j'ai créer mon composant.
<div id='container'></div>
ces conteneurs de dimensions sont définies dans le CSS, avec un tas d'autres conteneurs sur la page. qui définit la hauteur et la largeur et l'emplacement des composants à Réagir? Je suis habitué à la CSS de le faire et d'être capable d'accéder à la. Mais à Réagir, il semble que je ne peut accéder à cette information une fois que le composant a rendu.
- Ce qui ne vous interdit d'utiliser jQuery pour ce but?
- Je ne reçois pas votre point de vue.
- Je ne peux pas utiliser jquery cause l'ensemble de la page est mis en place réagir avec les composants qui n'ont pas été rendus encore. sens, l'élément n'est pas dans les dom. mais avec le html/css, qui n'était pas un problème cause de l'élément dans le dom avant, j'ai créé mon widget.
Vous devez vous connecter pour publier un commentaire.
Comme il a été déjà mentionné, vous ne pouvez pas obtenir tout élément de dimensions jusqu'à ce qu'il est rendu à DOM. Ce que vous pouvez faire à Réagir est pour que le rendu d'un élément de conteneur, puis obtenir la taille de
componentDidMount
, et puis le rendu reste du contenu.J'ai fait un exemple de travail.
Veuillez noter que l'utilisation de
setState
danscomponentDidMount
est un anti-modèle, mais dans ce cas, est bien, que c'est exactement ce que nous espérions atteindre.Cheers!
Code:
Vous ne pouvez pas. Pas de manière fiable, de toute façon. C'est une limitation du comportement du navigateur, en général, de ne pas Réagir.
Lorsque vous appelez
$('#container').width()
, vous interrogez la largeur d'un élément qui a rendus dans les DOM. Même en jQuery vous ne pouvez pas y échapper.Si vous avez absolument besoin d'un élément de la largeur avant rend, vous aurez besoin d'une estimation. Si vous avez besoin de mesurer avant d'être visible vous pouvez le faire tout en appliquant
visibility: hidden
, ou rendre quelque part discrètement sur la page, puis de le déplacer après la mesure.Comme indiqué, il s'agit d'une limitation de l'navigateurs - ils rendre dans un aller et "dans un thread" (JS point de vue) entre votre script qui manipule le DOM, et entre les gestionnaires d'événements d'exécution. Pour obtenir les dimensions après la manipulation, le chargement, le DOM, vous avez besoin de rendement (laissez votre fonction) et laisser le navigateur de rendu, et de réagir à certains événements que le rendu est fait.
Mais essayez cette astuce:
Vous pourriez essayer de mettre CSS
display: hidden; position: absolute;
et de le restreindre à certains invisible de la boîte englobante pour obtenir la largeur désirée. Ensuite, le rendement, et quand le rendu est fait, appel$('#container').width()
.L'idée est la suivante: Depuis
display: hidden
rend l'élément d'occuper l'espace à prendre si visible, le calcul doit être fait en arrière-plan.Je ne suis pas sûr si c'est admissible à titre de "avant de rendre".
Avertissement:
Je n'ai pas essayé, alors laissez-moi savoir si cela a fonctionné.
Et je ne suis pas sûr de savoir comment il se marie à Réagir.