Ottieni larghezza nodo DOM di React.refs dopo il rendering e attiva un nuovo rendering solo se la larghezza ha un valore modificato

Question

Sto tentando di ottenere la larghezza di un elemento DOM ref e di impostare state da utilizzare all'interno del componente render. Il problema si presenta perché questa larghezza cambia in input dell'utente e quando provo setState all'interno di componentDidUpdate inizia un ciclo infinito e il mio browser bombarda.

ho creato un violino qui http://jsbin.com/dizomohaso/1/edit?js,output (aprire la console di alcune informazioni)

Il mio pensiero è stato;

• Monti componenti, ingressi dati setState: refs.element.clientWidth

• utente, innesca render

• shouldComponentUpdate rendimenti true solo se new.state è non pari a old.state. Il mio problema è, non sono sicuro di dove abbia senso aggiornare questo state?

Qualsiasi aiuto sarà molto apprezzato, grazie per la lettura!

Brad.

Answer 1

var component = React.createClass({ 

    componentDidMount: function() { 

    //Get initial width. Obviously, this will trigger a render, 
    //but nothing will change, look wise. 
    //But, if this is against personal taste then store this property 
    //in a different way 
    //But it'll complicate your determineWidth logic a bit.   

    this.setState({ 
     elWidth: ReactDOM.findDOMNode(this.refs.the_input).getBoundingClientRect().width 
    }) 
    }, 

    determineWidth: function() { 

    var elWidth = ReactDOM.findDOMNode(this.refs.the_input).getBoundingClientRect().width 

    if (this.state.elWidth && this.state.elWidth !== elWidth) { 

     this.setState({ 
     elWidth: elWidth 
     }) 

    } 

    }, 

    render: function() { 

    var styleProp = {} 

    if (this.state.elWidth) { 
     styleProp.style = { width: this.state.elWidth }; 
    } 

    return (
     <input ref="the_input" onChange={this.determineWidth} {...styleProp} /> 
    ) 

    } 

}) 

Mi piace usare .getBoundingClientRect().width perché a seconda del browser, l'elemento potrebbe avere una larghezza frazionaria, e che la larghezza tornerà senza alcun arrotondamento.