【React】 7课 react内ref、findDOMNode等各种操作DOM的方法

1. 通过js来操作DOM

const inp = document.querySelector(‘input’);
inp.style.backgroundColor = ‘deeppink’

2. 通过使用findDOMNode操作DOM (可将组件转化为节点)

const inp = document.querySelector(‘input’);
ReactDOM.findDOMNode( inp ).style.color = “#fff”

3. 通过事件代理e来实现DOM操作

click2(e){
let {target} = e;
target.style.backgroundColor = ‘#90f’;
}

4. ref属性来实现DOM操作(字串的方法来进行标记)

<input ref={“btn”} />
——————————————
this.refs.btn.style.color = “white”
this.refs.btn.style.backgroundColor = “#f0f”

5. ref属性来实现DOM操作(函数式的引用方式-常用的)

<input ref={(e)=>{ this.list=e} } />
————————————————
this.list.style.color = “white”
this.list.style.backgroundColor = “#f03”

接下来我们来看代码演示：

首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件

npm init -y
npm i babel-standalone -D
npm i react react-dom -D

安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始编写下面代码

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <!-- 所有的页面代码都是放在这里面 -->
  <div id="app"></div>
  <!-- 用于解析jsx的代码 babel引用应在前面 -->
  <script src="./node_modules/babel-standalone/babel.js"></script>
  <!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
  <script src='./node_modules/react-dom/umd/react-dom.development.js'></script>

  <!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
  <script type=text/babel>
  
    class Element extends React.Component{
      //操作DOM的时候最好选择ref或findDOMNode,因为使用高效的DIFF算法，最小化页面的重绘；
      
      //1.通过js来操作DOM;
      click1(){
        const inp = document.querySelector('input');
        //通过原始方法修改样式
        inp.style.backgroundColor = 'deeppink'
        //使用findDOMNode操作DOM
        ReactDOM.findDOMNode( inp ).style.color = "#fff"  
      }

      //2.通过事件代理来实现DOM操作
      click2(e){
        let {target} = e;
        target.style.backgroundColor = '#90f'
      }
      
      //有两种标记方式：字串的方法来进行标记 、函数式的引用方式(常用的) 下面一一举例
      //3.ref属性来实现DOM操作(字串的方法来进行标记)
      click3(){
        console.log( this ) //this.refs内就是存放所有使用ref标记的内容
        this.refs.btn.style.color = "white"
        this.refs.btn.style.backgroundColor = "#f0f"
      }
      //4.ref属性来实现DOM操作(函数式的引用方式-常用的)
      click4(){
        console.log( this.list ) //ref内可以直接在组件this内的属性内存入标签
        this.list.style.color = "white"
        this.list.style.backgroundColor = "#f03"
      }

      click5(){
        //this.aaa.style.color = "white"  //使用findDOMNode一样可以
        console.log( ReactDOM.findDOMNode( this.aaa ) )	//打印是一个节点
        ReactDOM.findDOMNode( this.aaa ).style.color = "#fff"  
        this.aaa.style.backgroundColor = "#f03"
      }
      
      render(){
        return (
          <div>
            <input type='button' value='通过js来操作DOM' onClick = {this.click1.bind( this )} />
            <input type='button' value='通过事件代理e来实现DOM操作' onClick = {this.click2.bind( this )} />
            <input ref={"btn"} type='button' value='ref属性:字串的方法来进行标记' onClick = {this.click3.bind( this )} />
            <input ref={(e)=>{ this.list=e} } type='button' value='ref属性:函数式的引用方式' onClick = {this.click4.bind( this )} />
            <div ref={(e)=>{ this.aaa=e} } onClick = {this.click5.bind( this )} >div标签以及其他标签都行</div>
          </div>
        )
      }
    }

    //将Element组件直接渲染到id=app的标签上
    ReactDOM.render(
      <Element />,
      document.getElementById( 'app' )
    )

  </script>
</body>
</html>

运行效果如下：

在这里插入图片描述

全部一下点击后