React方向:react中5种Dom的操作方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React方向:react中5种Dom的操作方式相关的知识,希望对你有一定的参考价值。

参考技术A

通过 document.querySelector(\'#title\') 原生js的方式去拿到dom节点,然后去进行操作。

但是需要值得一提的是,官方的refs将在未来的时间段内会被废除,并且因ref挂载的节点是挂载在组件实例上,因此函数不能使用es5的写法,如果使用es5的写法,需要.bind去更改this指向,否则this.refs拿到的将是undefined。

使用这种方式需要注意的是ReactDOM需要使用 import ReactDOM from \'react-dom\' 提前引入进来,否则是找不到findDOMNode这个方法的。

前面涉及到 refs 即将被删除,因此,新版本 React 不推荐 使用ref string去操作DOM,转而推荐我们使用 ref callback的使用方式,通过这种方式挂载到实例对象上面,只需要在回调函数中使用this.属性名即可

Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。当 ref 被传递给 render 中的元素时,对该节点的引用可以在 ref 的 current 属性中被访问。

ref 的值根据节点的类型而有所不同:

通过实现监听输入框的值以及将输入框的值追加到获取到的dom元素ul中去,在通过获取ul的子节点li,去给所有的li添加点击事件

以上是关于React方向:react中5种Dom的操作方式的主要内容,如果未能解决你的问题,请参考以下文章

React笔记3

React笔记3

react ref 总结

02react 之 jsx

React 中操作 DOM 的方法

React中获取DOM节点的两种方法