“React中的DOM操作”笔记

发布时间:2019-06-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了“React中的DOM操作”笔记脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
React中的每一个组件都是一个状态机,通常情况下,我们通过设置组件的状态就可以完成UI的更新,但是在某些情况下确实需要直接操作DOM

React中操作DOM的方法:

  • Refs
  • findDOMNode()

findDOMNode()

当组件加载到页面上之后(mounted),你就可以通过 getDOMNode() 方法拿到组件对应的 DOM 元素。

React.findDOMNode()只在mounted组件中调用,mounted组件就是已经渲染在浏览器DOM结构中的组件。如果你在组件的render()方法中调用React.findDOMNode()就会抛出异常。

Refs

通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称,然后通过 this.refs.name 来访问对应的 DOM 元素。

比如有一种情况是必须直接操作 DOM 来实现的,你希望一个 <input/>元素在你清空它的值时 focus,你没法仅仅靠 state 来实现这个功能。

class App extends component {
  constructor() {
    return { userInput: '' };
  }

  handleChange(e) {
    this.setState({ userInput: e.target.value });
  }

  clearAnDFocusInput() {
    this.setState({ userInput: '' }, () => {
      this.refs.theInput.focus();
    });
  }

  render() {
    return (
      <div>
        <div onClick={this.clearAndFocusInput.bind(this)}>
          Click to Focus and Reset
        </div>
        <input
          ref="theInput"
          value={this.state.userInput}
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

如果ref 是设置在原生 HTML 元素上,它拿到的就是 DOM 元素,如果设置在自定义组件上,它拿到的就是组件实例,这时候就需要通过 findDOMNode来拿到组件的 DOM 元素。

因为无状态组件没有实例,所以 ref 不能设置在无状态组件上,一般来说这没什么问题,因为无状态组件没有实例方法,不需要 ref 去拿实例调用相关的方法,但是如果想要拿无状态组件的 DOM 元素的时候,就需要用一个状态组件封装一层,然后通过 ref findDOMNode 去获取。

脚本宝典总结

以上是脚本宝典为你收集整理的“React中的DOM操作”笔记全部内容,希望文章能够帮你解决“React中的DOM操作”笔记所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。