“React中的DOM操作”笔记

wyk1184 发布于2019-08-19 18:41 / 1297人阅读

摘要：中的每一个组件都是一个状态机，通常情况下，我们通过设置组件的状态就可以完成的更新，但是在某些情况下确实需要直接操作。只在组件中调用，组件就是已经渲染在浏览器结构中的组件。

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 来实现的，你希望一个元素在你清空它的值时 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 (
      
        
          Click to Focus and Reset
        
        
      
    );
  }
}

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

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

海外云主机 GPU服务器兼容笔记印象笔记笔记云笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79864.html

React中的小知识点

摘要：配置默认和中的操作并不能完全满足所有操作需求，有些时候还是需要和打交道。当中提供了属性来帮助我们获取已经挂载元素的节点。当元素在页面上挂载完成以后，就会调用这个函数，并且把这个挂载以后的节点传给这个函数。配置默认 defaultProps class ExampleComponent extends React.Component{ static defaultProps =...

niceforbear 2019-08-20 16:59 评论0 收藏0
大部分程序员都记不住的注解，Idea 云笔记却能轻松记住

摘要：只因技术种类繁杂众多层出不穷，程序员只有靠不断的学习才能不落后于技术，被工作淘汰。特此推荐给大家。 99%的程序员每天都是先学习，后工作，不然完成不了工作。只因技术种类繁杂众多、层出不穷，程序员只有靠不断的学习才能不落后于技术，被工作淘汰。我就是这其中一员，深得体会其中的「疼并快乐」，在...

ARGUS 2021-11-15 11:38 评论0 收藏0
EverMonkey-VSCode上最好用的印象笔记插件

摘要：配置在第一次使用小猿之前，需要配置印象笔记的开发者令牌。小猿在被激活后会执行一次这个命令，并且将以上内容缓存到内存中。建议与改进小猿是一个开源项目，欢迎广大印象笔记和的爱好者的反馈以及。印象猿印象猿(EverMonkey)是一款 VSCode 插件。使用小猿可以让你在 VSCode 中使用 Markdown 编辑，创建，更新印象笔记。安装打开 VSCode，在扩展商店中搜索 e...

entner 2019-08-20 15:33 评论0 收藏0
LocalNote，像使用本地文件一样使用印象笔记（支持 markdown 格式）

摘要：让你能够像使用本地文件一样使用印象笔记。支持流行的格式的笔记，印象笔记中完美显示，上传重新下载笔记仍为格式。三平台支持，安装即用，在平台也流畅的使用印象笔记。在被限制期间登录也会受限，所以会提示尚未登录。 LocalNote showImg(https://badges.gitter.im/littlecodersh/LocalNote.svg); showImg(https://im...

Galence 2019-07-31 12:21 评论0 收藏0