共计 2368 个字符,预计需要花费 6 分钟才能阅读完成。
平时在做 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、
正文完