javascript - 渲染后获取 React.refs DOM 节点宽度，仅当宽度值发生变化时才触发重新渲染

Question

我正在尝试获取 ref DOM 元素的宽度并设置 state，然后在组件 render 中使用。问题来了，因为这个宽度在用户输入时发生变化，当我在 componentDidUpdate 中尝试 setState 时，它开始无限循环，我的浏览器崩溃了。

我在这里创建了一个 fiddle http://jsbin.com/dizomohaso/1/edit?js,output (打开控制台获取一些信息)

我的想法是；

• 组件安装，setState: refs.element.clientWidth

• 用户输入数据，触发render

• shouldComponentUpdate 仅当 new.state 不等于 old 时才返回 true .状态。我的问题是，我不确定在哪里更新此 state 有意义？

任何帮助将不胜感激，感谢阅读!

布拉德。

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

  }

})

我喜欢使用 .getBoundingClientRect().width，因为根据您的浏览器，该元素可能具有小数宽度，并且该宽度将在不进行任何舍入的情况下返回。