react项目如何操作dom

平时在做react项目过程中难免会遇到一些特殊场景需要去操作DOM完成，比如锚点，这篇文章会从两个角度（类组件、函数组件）去总结一些常见操作DOM的方式方法。

1、父组件操作子组件DOM——React.forwardRef

在16.3版本之前，没有办法将ref传递到一个函数组件之中，但是只要名字不相同是可以通过props传递到子组件。

伟大的fb在react 16.3中新加了一个React.forwardRef函数，使之子组件可以直接接收ref

function forwardRef(render: ForwardRefRenderFunction): ForwardRefExoticComponent & RefAttributes>;

interface ForwardRefRenderFunction {
    (props: PropsWithChildren
, ref: ForwardedRef): ReactElement | null;
    displayName?: string;
    // explicit rejected with `never` required due to
    // https://github.com/microsoft/TypeScript/issues/36826
    /**
     * defaultProps are not supported on render functions
     */
    defaultProps?: never;
    /**
     * propTypes are not supported on render functions
     */
    propTypes?: never;
}

其实，React.forwardRef就是一个HOC，接收一个函数组件，这个函数组件可以接收ref参数，说白了，React.forwardRef的作用就是可以使被包裹组件接收ref参数。

这里需要注意，泛型类型T指ref的类型，P指props类型。

下面举个例子说明下用法：

// 父组件
const Father = () => {
    const ref = React.createRef();
    
    useEffect(() => {
        if (ref.current) {
            ref.current.style.fontSize = '16px';
        }
    })
    
    return 
}

// 子组件
const Child = React.forwardRef((props, ref) => {
    return 
child
})

在页面初始渲染完后会修改Child组件中div文本字体大小。

2、组件内操作DOM——ref

// React.RefObject
import React, { useEffect } from 'react';

const InputFocus = () => {

  const inputRef = React.createRef();

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  })

  return 
}

export default InputFocus;

或者

// ((instance: HTMLInputElement | null) => void)
import React, { useEffect } from 'react';

const InputFocus = () => {

  let inputRef: HTMLDivElement | null = null;

  useEffect(() => {
    if (inputRef) {
      inputRef.focus();
    }
  })

  return  inputRef = el}/>
}

export default InputFocus;

如果在类组件内可以如下写：

// React.RefObject
class InputFocus extends React.Component<{}, {}> {
  inputRef = React.createRef();

  componentDidMount(){
    if (this.inputRef.current) {
      this.inputRef.current.focus()
    }
  }

  render() {
    return 
  }
}

export default InputFocus;

或者

// ((instance: HTMLInputElement | null) => void)
class InputFocus extends React.Component<{}, {}> {
  inputRef: HTMLInputElement | null = null;

  componentDidMount(){
    if (this.inputRef) {
      this.inputRef.focus()
    }
  }

  render() {
    return  this.inputRef = el}/>
  }
}

export default InputFocus;

这里说明一下上面两种使用方式，从上图可以得知ref可以接收上面五种类型，可以接收React.createRef创建的React.RefObject对象，也可以接收一个函数，参数为绑定该ref的元素。

3、