web-dev-qa-db-fra.com

React, comment accéder à l'élément DOM dans ma fonction de rendu à partir du même composant

Je me demande quelle est la meilleure pratique pour accéder aux éléments DOM de ma fonction de rendu à partir du même composant. Notez que je vais rendre ce composant plusieurs fois sur une page.

par exemple. 

var TodoItem = React.createClass({
    ...
    render:function(){

        function oneSecLater(){
            setTimeout(function(){
            //select the current className? this doesn't work, but it gives you an idea what I want.
            document.getElementsByClassName('name').style.backgroundColor = "red";
                )}, 1000);
        }

        return(
            <div className='name'>{this.oneSecLater}</div>
        )



})
javascriptcssreactjsjsx
15
wonghenry

Ici, pas besoin d'utiliser setTimeout. Il existe des méthodes de cycle de vie pour le composant, dont componentDidMount est appelé après le rendu. Vous pouvez donc obtenir la référence à votre div dans la méthode. 

var TodoItem = React.createClass({
  ...
  componentDidMount: function () {
     if(this.myDiv) {
        this.myDiv.style.backgroundColor = "red";
     }
  }
  render:function(){
    return(
        <div className='name' ref = {c => this.myDiv = c}></div>
    );
});
13
Saba Hassan

Vous pouvez utiliser ReactDOM.findDOMNode(this) pour accéder au nœud DOM sous-jacent. Mais accéder au nœud DOM et manipuler comme vous le faites va à l'encontre du style de programmation React. Il est préférable d'utiliser une variable d'état appelée méthode setState pour restituer le DOM.

20
VJAI

Vous pouvez utiliser ref callback pour accéder à l'élément dom dans react, ce que React Docs recommande de suivre

et le faire dans la fonction de cycle de vie componentDidMount car les références ne seront pas accessibles avant la création du DOM

var TodoItem = React.createClass({
    ...
    componentDidMount() {
          setTimeout(function(){
               this.myDiv.style.backgroundColor = "red";
          )}, 1000);
    }
    render:function(){

        return(
            <div className='name' ref={(ele) => this.myDiv = ele}></div>
        )

})

DOCS

1
Shubham Khatri

voici ma solution: Pour obtenir un computedCss d'un élément spécifique, vous devez d'abord ajouter un attribut ref à elemenet. 

entrez la description de l'image ici

render(){
  <div>
    <Row className="chartline2">
      <Col className="Gutter-row" span={24}>
        <div className="Gutter-box lineChartWrap" id="lineChartWrap" ref="lineChartWrap">
            <LineChart data={lineChartData} options={lineChartOptions} width="100%" height="300"/>
        </div>
      </Col>
    </Row>
  </div>
}

Puis, dans la fonction composantDidUpdate (), récupérez le css de votre élément en utilisant window.getComputedStyle (this.refs.lineChartWrap) .XXX entrez la description de l'image ici

	componentDidUpdate(){
		console.log("-------  get width ---");
		let ele = document.querySelector("#lineCharWrap");
		console.log(this.refs.lineChartWrap);
		console.log(window.getComputedStyle(this.refs.lineChartWrap).width);
	}

0
juana pu