Comment positionner un composant React par rapport à son parent?

J'ai un parent Réagir composant qui contient un enfant Réagir composant.

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

J'ai besoin d'appliquer des styles à l'enfant composante de la position à l'intérieur de ses parents, mais sa position dépend de la taille de la mère.

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 les valeurs de pourcentage d'ici, parce que le haut et la gauche, les positions sont les fonctions de l'enfant et du parent largeurs et hauteurs.

Quel est le Réagissent pour accomplir cette?

source d'informationauteur Seth

  1. 9

    La réponse à cette question est d'utiliser un ref, comme décrit à la Les références aux Composants.

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

    Effectuer DOM mesures nécessite presque toujours l'atteinte à un "indigène", de composants et d'accéder à son sous-jacent DOM nœud à l'aide d'un ref. Refs 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 permettra de bien positionner l'élément immédiatement après le premier rendu. Si vous avez également besoin de repositionner l'élément après un changement d'accessoires, puis faire le changement d'état dans componentWillReceiveProps(nextProps).

  2. 0

    La bonne façon de le faire est d'utiliser les CSS. Si vous appliquez position:relative à l'élément parent alors l'enfant de l'élément peut être déplacé à l'aide d' top et left en relation avec le parent. Vous pouvez même utiliser des pourcentages, comme top:50%qui utilise à la hauteur de l'élément parent.