关于dom:react项目如何操作dom

平时在做react我的项目过程中难免会遇到一些非凡场景须要去操作DOM实现，比方锚点，这篇文章会从两个角度（类组件、函数组件）去总结一些常见操作DOM的形式办法。

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

在16.3版本之前，没有方法将ref传递到一个函数组件之中，然而只有名字不雷同是能够通过props传递到子组件。

平凡的fb在react 16.3中新加了一个React.forwardRef函数，使之子组件能够间接接管ref

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

interface ForwardRefRenderFunction<T, P = {}> {
    (props: PropsWithChildren<P>, ref: ForwardedRef<T>): 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<HTMLDivElement>();
    
    useEffect(() => {
        if (ref.current) {
            ref.current.style.fontSize = '16px';
        }
    })
    
    return <Child ref={ref}></Child>
}

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

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

2、组件内操作DOM——ref

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

const InputFocus = () => {

  const inputRef = React.createRef<HTMLInputElement>();

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

  return <input type="text" ref={inputRef}/>
}

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 <input type="text" ref={(el) => inputRef = el}/>
}

export default InputFocus;

如果在类组件内能够如下写：

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

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

  render() {
    return <input type="text" ref={this.inputRef}/>
  }
}

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 <input type="text" ref={(el) => this.inputRef = el}/>
  }
}

export default InputFocus;

这里阐明一下下面两种应用形式，从上图能够得悉ref能够接管下面五种类型，能够接管React.createRef创立的React.RefObject<HTMLInputElement>对象，也能够接管一个函数，参数为绑定该ref的元素。

3、