React 中 ref 的使用
官方文档传送门
在类组件中使用 ref
1. React.createRef
class App extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
}
componentDidMount() {
console.log(this.divRef.current);
}
render() {
return <div ref={this.divRef}>验证 createRef 的一个div标签</div>
}
}
2. 回调函数使用 ref
class App extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
}
componentDidMount() {
console.log(this.divRef);
}
render() {
return <div ref={ref => { this.divRef = ref }}>验证 createRef (回调方式) 的一个div标签</div>
}
}
注意： 以上方法不能在函数组件中使用，因为函数组件没有实例。
在函数组件中使用 ref
1. React.useRef
const UseRefComponent = () => {
const divRef = React.useRef();
React.useEffect(() => {
console.log(divRef.current);
}, []);
return <div ref={divRef}>验证 useRef 的一个 div 标签</div>
}
2. React.forwardRef
export const App = () => {
const divRef = React.useRef();
React.useEffect(() => {
console.log(divRef.current);
}, []);
return <ForwardRefComponent ref={divRef} />
}
export const ForwardRefComponent = React.forwardRef((props, ref) => {
return <div ref={ref}>验证 forwardRef 的一个 div 标签</div>
})
3. React.useImperativeHandle
export const App = () => {
const divRef = React.useRef();
React.useEffect(() => {
console.log(divRef.current.clog());
}, []);
return <ForwardRefComponent ref={divRef} />
}
export const ForwardRefComponent = React.forwardRef((props, ref) => {
const divRef = React.useRef();
React.useImperativeHandle(ref, () => ({
clog: () => {
console.log(divRef.current);
}
}));
return <div ref={divRef}>验证 useImperativeHandle 的一个 div 标签</div>
})
