React React.createRef(), React.forwardRef() 的简单 demo

在 react 中使用 ref 是件挺麻烦的事, 首先要声明一个变量 _ref, 再把变量带到目标节点的 ref 属性中, 用箭头函数声明个临时变量 i, 并把这个临时变量 i 传给 _ref

// 不完整代码
...
let refElement
...
<div ref={
    
    i => refElement = i}></div>
...

React.createRef() 方法可以简化这个步骤

// 不完整代码
...
let refElement2 = React.createRef();
...
<div ref={
    
    refElement2}></div>
...

React.forwardRef() 创建一个React组件, 可以把上级 ref 转发(传递) 给下级组件, 继而可以在上级组件中获取下级目标

注:

不能在函数组件上使用 ref 属性，因为他们没有实例
函数式组件, class 组件里都可以使用 React.createRef(), 差别只是要加上 this

demo

import React from "react";

class Bpp extends React.Component {
    
    
	render() {
    
    
		return (
			<div>{
    
    this.props.children}</div>
		);
	}
};

const Cpp = React.forwardRef((props, ref) => {
    
    
	const click1 = (event) => {
    
    
		console.log(ref)
	}

	return (
		<div>
			<button onClick={
    
    click1}>Cpp 中获取 refComponent_Cpp</button>

			<div>Cpp 是由 React.forwardRef() 创建的组件, 本组件接受一个 ref 参数, 并传给本组件下的另一个组件</div>
			<div ref={
    
    ref}>这是接受 ref 的组件, 可以在上级组件中被获取</div>
		</div>
	);
});

const ComponentApp = () => {
    
    
	let refElement;
	let refElement2 = React.createRef();
	let refComponent;
	let refComponent2 = React.createRef();

	let refComponent_Cpp = React.createRef();

	const click1 = (event) => {
    
    
		console.log(refElement)
		console.log(refElement2)
		console.log(refComponent)
		console.log(refComponent2)
	}

	const click2 = (event) => {
    
    
		console.log(refComponent_Cpp)
	}

	return (
		<div>
			<button onClick={
    
    click1}>函数组件中使用 React.createRef()</button>

			<div ref={
    
    i => refElement = i}>DOM 上用箭头函数设置 ref, 获得 DOM 本身</div>
			<div ref={
    
    refElement2}>DOM 上用 React.createRef() 设置 ref, 获得一个对象, 对象的 current 指向 DOM 本身</div>

			<Bpp ref={
    
    i => refComponent = i}>class 组件上用箭头函数设置 ref, 获得组件的挂载实例</Bpp>
			<Bpp ref={
    
    refComponent2}>class 组件上用 React.createRef() 设置 ref, 获得一个对象, 对象的 current 指向组件的挂载实例</Bpp>

			<hr />

			<button onClick={
    
    click2}>App 中获取 refComponent_Cpp</button>

			<Cpp ref={
    
    refComponent_Cpp}></Cpp>
		</div>
	);
};

export default ComponentApp

// 根组件调用 ComponentApp 的 demo 就不另外写了
// import ComponentApp from "./components/ComponentApp";
// render((
// 	<ComponentApp />
// ), document.getElementById("react-container"));

end

React React.createRef(), React.forwardRef() 的简单 demo

猜你喜欢