【React】React 中 ref 的用法总结

使用回调 ref（类组件）

class MyComponent extends Component {
	setRef = element => this.myRef = element;
	// 访问 DOM 元素：this.myRef
	}

	render() {
    	return <div ref={this.setRef}>Hello, World!</div>;
    }
  
  // 简写（会有回调执行次数问题）
	render() {
	    return <div ref={element => this.myRef = element}>Hello, World!</div>;
	}
}

使用 createRef 方法（类组件）

class MyComponent extends Component {
  	myRef = React.createRef();
	// 访问 DOM 元素：this.myRef.current

    render() {
    	return <div ref={this.myRef}>Hello, World!</div>;
  	}
}

使用 useRef 钩子（函数组件）

function MyComponent() {
	const myRef = useRef(null);
	// 访问 DOM 元素：myRef.current
	
	return <div ref={myRef}>Hello, World!</div>;
}

字符串 ref（类组件）——已弃用

class MyComponent extends Component {
	// 访问 DOM 元素：this.refs.myRef

    render() {
    	return <div ref=“myRef”}>Hello, World!</div>;
  	}
}