React forwardRef的使用方法

作用与注意点

  1. 传递ref,把自身的ref绑定到其他地方(e.g. 你把文件交给总裁秘书,总裁秘书把文件交给总裁)
  2. ref 和 key 有点特殊,不会作为props参数向下传递,this.props拿不到ref对象
  3. 函数组件是没有实例的,可以用useImperativeHandle实现部分功能
  4. 高阶组件需做特殊处理

React forwardRef的使用方法_第1张图片

父 -> 子 -> 子(Dom)

React forwardRef的使用方法_第2张图片

import React, { useRef } from 'react';
import Content from './content';

const Home = () => {
  // 创建一个Ref对象
  const connectRef = useRef(null);

  const handleFoucus = () => {
    const _ref = connectRef.current;
    _ref.focus();
  };

  return (
    <div>
        <button onClick={() => handleFoucus()}>
          使用子组件中DOM元素的方法
        </button>

        <Content ref={connectRef} />
    </div>
  );
};

export default Home;
import React, { forwardRef } from 'react';

/**
 * forwardRef包裹后,ref会作为第二个参数,接收传进来的ref属性
 * e.g.
 * 
 *
 * @param props - {count, user}
 * @param ref   - connectRef
 * */
const Content = (props, ref) => {
  return (
    <div>
   	  {/* 把ref绑定给传进来的ref ≈ ref={connectRef} */}
      <input type="password" ref={ref} />
    </div>
  )
};

export default forwardRef(Content);

父 -> 子 -> 子(class)

React forwardRef的使用方法_第3张图片

import React, { useRef } from 'react';
import Content from './content';

const Home = () => {
  // 创建一个Ref对象
  const connectRef = useRef(null);

  const handleAdd = () => {
    const _ref = connectRef.current;

    const { count } = _ref.state;
    _ref.setState({
      count: count + 1
    })
  };

  return (
    <div>
        <button onClick={() => handleAdd()}>
          使用子组件中class组件的属性和方法
        </button>

        <Content ref={connectRef} />
    </div>
  );
};

export default Home;
import React, { forwardRef } from 'react';
import Header from './header';
import Footer from './footer';

/**
 * forwardRef包裹后,ref会作为第二个参数,接收传进来的ref属性
 * e.g.
 * 
 *
 * @param props - {count, user}
 * @param ref   - connectRef
 * */
const Content = (props, ref) => {
  return (
    <div>
      {/* 把ref绑定给传进来的ref ≈ ref={connectRef} */}
      <Header ref={ref} />  {/* class组件 */}
		
      {/* 
函数组件是没有实例的,所以connectRef.current: null */} </div> ) }; export default forwardRef(Content)
import React from 'react';

export default class Header extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        {this.state.count}
      </div>
    )
  }
};

高阶组件中的特殊情况

  • 高阶组件本质是函数,参数为组件,返回值是新组件(增强过的组件)
  • 高阶组件会把所有接收到的props,传递给被包装的组件(透传)
  • ref 和 key 类似,不是一个prop,所以不会透传,ref会绑定到外层的高阶组件上
  • 高阶组件可以嵌套多层,e.g. Hoc1(Hoc2(Hoc3(Content)))

所以为了把ref传递给最里面的组件,有两种方法

  • 在最外层用 forwardRef 对 ref 对象进行处理,ref -> ref -> props.key = ref
  • 不用 ref,用自定义props承载 ref 对象,props.key = ref
/*
  处理ref
  e.g. Hoc1(Hoc2(Content))

   给Content绑定的ref会绑定到Hoc1上,且不会继续向下传递

  第一种方法 React.forwardRef ===============

      在 Hoc1外面 用React.forwardRef()对ref做处理,用props来传递ref
      0. 在高阶组件外面包裹forwardRef,拦截获取ref,增加一个props(xxx={ref}),真实组件通过props.xxx获取
      1. 使用时传 ref={XXXX}  // 和第二种方法不同的地方
      2. 用forwardRef的第二个参数获取 ref
      3. 增加一个新的props,用来向下转发ref  e.g. forwardedRef={ref}
      4. 真实组件中绑定 ref={props.forwardedRef}

      const Home = (props) => {
        const connectRef = useRef(null);

        return (
          
); }; // 被包装组件 const Content = (props) => { return (
); }; // forwardRef的第二个入参可以接收ref,在Hoc外层对ref做处理 export default React.forwardRef((props, ref) => { const Wrapper = withRouter(Content); // Hoc // forwardRef包裹的是Wrapper // 需要在Wrapper中把ref向下传递给真实组件 // Wrapper中增加一个props属性,把ref对象作为props传给子组件 return ; }); 第二种方法 ========== 0. 使用时就用一个props来保存ref 1. 使用时传 xxx={ref} // 和第一种方法的不同点 2. 真实组件中绑定 ref={props.xxx} const Home = (props) => { const connectRef = useRef(null); return (
); }; // 定义高阶组件 export const Hoc = (WrappedComponent) => { class Wrapper extends React.Component { render() { return } } } // 被包装的组件 const Content = (props) => { return (
); }; // 包装过程 export default Hoc(Content); * */

你可能感兴趣的:(React,react)