react学习—ref转发

一、ref转发

前面我们将ref时提到了，ref并不能作用于函数组件，因为react觉得函数组件只返回一个dom并没有多大意义。那么如果我们一定要对函数组件使用ref怎么办呢？

1、函数组件转发

import React, { Component } from 'react'

function A(props) {
  return (
    <div>
      <span>{props.words}</span>
    </div>
  )
}

export default class App extends Component {
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
    console.log(this);
  }
  
  render() {
    return (
      <div>
        <A ref={this.ARef} words="abcd" />
        <h1 ref={this.hRef}>类组件</h1>
      </div>
    )
  }
}

此时我们声明两个ref绑定在函数组件A和h1标签上，果然系统提示ref不能作用于函数组件，而输出结果也显示只有h1

通过ref转发后

import React, { Component } from 'react'

function A(props, ref) {
  return (
    <div>
      <span ref={ref}>{props.words}</span>// 将传进来的ref绑定在span上
    </div>
  )
}
//传递函数组件A，得到一个新组件NewA
const NewA = React.forwardRef(A)
export default class App extends Component {
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
    console.log(this);
  }
  
  render() {
    return (
      <div>
        <NewA ref={this.ARef} words="abcd" />
        <h1 ref={this.hRef}>类组件</h1>
      </div>
    )
  }
}

forwardRef方法：
1. 参数，传递的是函数组件，不能是类组件，并且，函数组件需要有第二个参数来得到ref
2. 返回值，返回一个新的组件

2、类组件转发

import React, { Component } from 'react'

class A extends Component {
  render() {
    return (
      <div>
        <span ref={this.props.ref1}>{this.props.words}</span>
      </div>
    )
  }
}
export default class App extends Component {
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
    console.log(this);
  }
  render() {
    return (
      <div>
        <A ref1={this.ARef} words="abcd" />
        <h1 ref={this.hRef}>类组件</h1>
      </div>
    )
  }
}

类组件中我们可以通过属性的方式传递ref（ref不是属性），但这明显不是我们想要的转发。

这里我们可以利用forwardRef通过函数的方式返回类组件A，从而实现转发

import React, { Component } from 'react'

class A extends Component {
  render() {
    return (
      <div>
        <span ref={this.props.abc}>{this.props.words}</span>
      </div>
    )
  }
}
const NewA = React.forwardRef((props, ref) => {
  return <A {...props} abc={ref} />
})
export default class App extends Component {
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
    console.log(this);
  }
  render() {
    return (
      <div>
        <NewA ref={this.ARef} words="abcd" />
        <h1 ref={this.hRef}>类组件</h1>
      </div>
    )
  }
}

那么通过转发我们可以做什么呢？

3、实例

在前面我们学习了高阶组件，那么我们如果直接对高阶组件使用ref会怎么样。

import React from 'react'
import { A } from "./components/Comps";
import withLog from "./HOC/withLog";
let AComp = withLog(A);
export default class App extends React.Component {
    myRef = React.createRef();

    componentDidMount() {
        console.log(this.myRef);
    }
    render() {
        return (
            <div>
                <AComp ref={this.myRef} isLogin a={1} />
            </div>
        )
    }
}

高阶组件withLog中我们只是想对A组件进行功能增能，但是后续使用中我们仍然想对A组件使用ref怎么办呢？

import React from "react"

/**
 * 高阶组件
 * @param {*} comp 组件
 */
export default function withLog(Comp) {
    class LogWrapper extends React.Component {
        componentDidMount() {
            console.log(`日志：组件${Comp.name}被创建了！${Date.now()}`);
        }
        componentWillUnmount() {
            console.log(`日志：组件${Comp.name}被销毁了！${Date.now()}`);
        }
        render() {
            //正常的属性
            //forwardRef代表要转发的ref  {current:null}
            const { forwardRef, ...rest } = this.props;
            return (
                <>
                    <Comp ref={forwardRef} {...rest} />
                </>
            )
        }
    }
    return React.forwardRef((props, ref) => {
        return <LogWrapper {...props} forwardRef={ref} />
    })
}

通过转发就可以做到了。

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！