composantDidMount appelé avant que le DOM réel est disponible

Question

Je suis très nouveau à React. J'ai besoin d'obtenir la hauteur d'un élément, donc j'essaie de l'obtenir à la méthode componentDidMount. J'ai compris que cette méthode était appelée après avoir rendu le composant, qui est à la fin pour écrire le DOM réel que je suppose. Cependant, componentDidMount est appelé avant que le DOM final soit disponible. Comment venir?

componentDidMount() { 
    const el = window.document.getElementById('comments'); // el is null 
    console.log(el); 
} 

resize() { 
    const el = window.document.getElementById('comments'); // el is null 
    console.log(el); 
} 

render() { 
    const { name } = this.props; 
    const Comments = this.props.comments.filter(comment => comment.body !== null && comment.body !== '').map(comment => <Comment key={comment.id} comment={comment} />); 
    return (
    <div ref={this.resize}> 
     <div> 
     <div id="comments"> 
      { Comments } 
     </div> 
     </div> 
    </div> 
); 
} 

Answer 1

Sur réagiriez-vous ne devez pas compter sur DOM qui est retourné par la méthode de rendu. Le composant et la partie de rendu sont deux processus différents dans React, de sorte que l'approche de l'extérieur ne fonctionne pas dans React. Ce que vous pouvez faire est, enregistrer des commentaires comme ref:

componentDidMount() { 
     var erd = elementResizeDetectorMaker(); 
     erd.listenTo(this.refs.comments, resize); 
    } 

    resize(element) { 
     //do-some-thing 
    } 

    render() { 
     const { name } = this.props; 
     const Comments = this.props.comments.filter(comment => comment.body !== null && comment.body !== '').map(comment => <Comment key={comment.id} comment={comment} />); 
     return (
     <div> 
      <div> 
      <div ref={comments => { this.comments = comments; }}> 
       { Comments } 
      </div> 
      </div> 
     </div> 
    ); 

} 

PS: Dans une situation similaire je cette bibliothèque étonnante: https://github.com/wnr/element-resize-detector

Answer 2

Votre sélection const el = window.document.getElementById('comments'); (c'est le modèle anti) est nul parce que votre select Node n'existe pas sur le cycle de vie de rendu componentDidiMount.

Vous devez sélectionner le motif interne React de votre noeud (ou DOM).

Modifiez votre code pour ce bloc de code, remplacez le sélecteur javascript 'getElementBy' pour les références de React. Vérifier la documentation https://facebook.github.io/react/docs/refs-and-the-dom.html

componentDidMount() { 
    let el = this.refs['comments'] 
    console.log(el.clientHeight) 
    this.resize() 
} 

resize() { 
    let el = this.refs['comments'] 
    console.log(el.clientHeight) 
} 

render() { 
    const { name } = this.props; 
    const Comments = this.props.comments.filter(comment => comment.body !== null && comment.body !== '').map(comment => <Comment key={comment.id} comment={comment} />); 
    return (
    <div ref='comments'> 
     <div> 
     <div id="comments"> 
      { Comments } 
     </div> 
     </div> 
    </div> 
); 
}