React系列(三) - DOM操作

553 阅读1分钟

React系列(一)-脚手架创建项目
React系列(二) - react基础知识
React系列(四) - react生命周期

React和Vue一样,大多数情况下是不需要操作DOM元素的。只需要关注组件的状态(state),使用(setState)来更新状态,从而使页面UI更新。但也有特殊情况下需要操作DOM的。 例如:

  1. 处理焦点、文本选择和媒体控制
  2. 触发强制动画
  3. 集成第三方DOM库

ref

React提供的这个属性,如果ref设置在原生HTML上,就是获取这个DOM元素;如果设置在组件上,就是获取这个组件的实例。
ps: 函数组件不能使用ref回去实例
ps:获取DOM元素时,在组件mount之后再获取,componentWillMount和第一次render都获取不到,在componentDidMount才能获取到

  1. string方式直接绑定(不推荐,以后可能废弃)
import React from 'react';

class App extends React.Component {
    
    // componentDidMount是一个生命周期函数,在页面渲染完成后调用
    componentDidMount() {
        console.log(this.refs.content) // <div>Hello, World!</div>
    }
    
    render() {
        return (
            <div ref="content">Hello, World!</div>
        )
    }
}

export default App;

结果:

1.png

  1. callback回调函数形式(推荐)
import React from 'react';

class App extends React.Component {
    
    componentDidMount() {
        console.log(this.content) // <div>Hello, callback!</div>
    }
    
    render() {
        return (
            <div ref={e => this.content = e}>Hello, callback!</div>
        )
    }
}

export default App;

结果:

2.png

  1. createRef() (最新方式)
import React from 'react';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.content = React.createRef();
    }
    
    componentDidMount() {
        // 通过current属性才可以获取到dom元素
        console.log(this.content.current) // <div>Hello, Wrold!</div>
    }
    
    render() {
        return (
            <div ref={e => this.content = e}>Hello, Wrold!</div>
        )
    }
}

结果:

3.png

ForwardRef获取子组件实例

import React from 'react';

const Test = React.forwardRef((props,ref)=>{
  return (
      <div ref={ref}>{props.txt}</div>
  )
})


class App extends React.Component {

  constructor(props) {
    super(props)
    this.content = React.createRef()
  }

  componentDidMount() {
    console.log(this.content.current) // <div>测试</div>
  }

  render() {
    return (
      <div>
        <Test ref={this.content} txt="测试" />
      </div>
    )
  }
}

export default App;

结果:

4.png

给元素添加样式

import React from 'react';

class App extends React.Component {

    constructor(props) {
        this.content = React.createRef();
    }
    
    componentDidMount() {
        // 设置背景颜色
        this.content.style.background = 'red'
    }
    render() {
        return (
            <div ref={e => this.content = e}></div>
        )
    }
}