web-dev-qa-db-fra.com

Comment positionner un composant React par rapport à son parent?

J'ai un parent React composant qui contient un enfant React composant.

<div>
  <div>Child</div>
</div>

J'ai besoin d'appliquer des styles au composant enfant pour le positionner dans son parent, mais sa position dépend de la taille du parent.

render() {
  const styles = {
    position: 'absolute',
    top: top(),    // computed based on child and parent's height
    left: left()   // computed based on child and parent's width
  };
  return <div style={styles}>Child</div>;
}

Je ne peux pas utiliser de valeurs de pourcentage ici, car les positions supérieure et gauche sont fonction des largeurs et hauteurs de l'enfant et du parent.

Quelle est la manière React pour y parvenir?

javascriptcssdomreactjs
23
Seth

La réponse à cette question est d'utiliser une référence comme décrit sur Références aux composants .

Le problème sous-jacent est que le nœud DOM (et son nœud DOM parent) est nécessaire pour positionner correctement l'élément, mais il n'est disponible qu'après le premier rendu. De l'article lié ci-dessus:

La réalisation de mesures DOM nécessite presque toujours d'atteindre un composant "natif" et d'accéder à son nœud DOM sous-jacent à l'aide d'une référence. Les références sont l'un des seuls moyens pratiques de le faire de manière fiable.

Voici la solution:

getInitialState() {
  return {
    styles: {
      top: 0,
      left: 0
    }
  };
},

componentDidMount() {
  this.setState({
    styles: {
      top: computeTopWith(this.refs.child),
      left: computeLeftWith(this.refs.child)
    }
  })
},

render() {
  return <div ref="child" style={this.state.styles}>Child</div>;
}

Cela positionnera correctement l'élément immédiatement après le premier rendu. Si vous devez également repositionner l'élément après un changement d'accessoires, effectuez le changement d'état dans componentWillReceiveProps(nextProps).

18
Seth