React.refs erhalten DOM-Knotenbreite nach Rendern und triggert nur wenn Breite Wert geändert hat

Question

Ich versuche, die Breite eines ref DOM-Elements zu erhalten und setze state dann innerhalb der Komponente render. Das Problem kommt, weil diese Breite auf Benutzereingaben ändert und wenn ich setState innerhalb componentDidUpdate versuche, startet es eine Endlosschleife und meine Browser Bomben.

Ich habe eine Geige hier http://jsbin.com/dizomohaso/1/edit?js,output (öffnen Sie die Konsole für einige Informationen)

Mein Denken war;

• Component Mounts, setState: refs.element.clientWidth

• Benutzereingaben Daten, löst render

• shouldComponentUpdate kehrt true nur, wenn new.statenicht gleich old.state ist. Mein Problem ist, ich bin mir nicht sicher, wo es sinnvoll ist, diese state zu aktualisieren?

Jede Hilfe wird sehr geschätzt, danke fürs Lesen!

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} /> 
    ) 

    } 

}) 

Ich mag .getBoundingClientRect().width verwenden, da je nach Browser, könnte das Element eine Teilbreite hat, und diese Breite wird ohne Rundung zurück.