How to use React forwardRef and what to note

const A = React.forwardRef((props,ref)=><B {...props} ref={ref}/>)

const A = React.forwardRef((props, ref) => (
<div ref={ref}>
<B {...props} />
</div>
))

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

const Home = () => {
  // Create a Ref object const connectRef = useRef(null);

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

  return (
    <div>
        <button onClick={() => handleFoucus()}>
          Use the method of DOM elements in child components</button>

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

export default Home;

import React, { forwardRef } from 'react';

/**
 * After forwardRef wraps, ref will be used as the second parameter to receive the passed ref attribute * eg
 * <Content count={count} user={user} ref={connectRef}>
 *
 * @param props - {count, user}
 * @param ref - connectRef
 * */
const Content = (props, ref) => {
  return (
    <div>
   	  {/* Bind ref to the passed ref ≈ ref={connectRef} */}
      <input type="password" ref={ref} />
    </div>
  )
};

export default forwardRef(Content);

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

const Home = () => {
  // Create a Ref object const connectRef = useRef(null);

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

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

  return (
    <div>
        <button onClick={() => handleAdd()}>
          Use the properties and methods of the class component in the child component</button>

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

export default Home;

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

/**
 * After forwardRef wraps, ref will be used as the second parameter to receive the passed ref attribute * eg
 * <Content count={count} user={user} ref={connectRef}>
 *
 * @param props - {count, user}
 * @param ref - connectRef
 * */
const Content = (props, ref) => {
  return (
    <div>
      {/* Bind ref to the passed ref ≈ ref={connectRef} */}
      <Header ref={ref} /> {/* class component*/}
		
      {/* <Footer ref={ref} /> Function components have no instances, so 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>
    )
  }
};

/*
  Handling refs
  eg Hoc1(Hoc2(Content))

  <Content ref={myRef} /> The ref bound to Content will be bound to Hoc1 and will not be passed down to the first method React.forwardRef ================

      Use React.forwardRef() to process ref outside Hoc1 and use props to pass ref
      0. Wrap forwardRef outside the high-order component, intercept and obtain ref, add a props (xxx={ref}), and the real component is obtained through props.xxx1. Pass ref={XXXX} when using // Difference from the second method2. Use the second parameter of forwardRef to obtain ref
      3. Add a new props to forward ref downwards, eg forwardedRef={ref}
      4. Bind ref={props.forwardedRef} in the real component

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

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

      // Wrapped component const Content = (props) => {
        return (
          <div>
            <input type="password" ref={props.forwardedRef} />
          </div>
        );
      };


      // The second input parameter of forwardRef can receive ref, and process ref in the outer layer of Hoc export default React.forwardRef((props, ref) => {
        const Wrapper = React.memo(Content); // Hoc

        // forwardRef wraps Wrapper
        // Need to pass ref down to the real component in Wrapper // Add a props attribute in Wrapper and pass the ref object as props to the child component return <Wrapper {...props} forwardedRef={ref} />;
      });

  The Second Method ==========

  0. Use a props to save ref when using
  1. Pass xxx={ref} when using // Difference from the first method 2. Bind ref={props.xxx} in the real component

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

    return (
      <div>
        <Content forwardedRef={connectRef} />
      </div>
    );
  };

  // Define a higher-order component export const Hoc = (WrappedComponent) => {
    class Wrapper extends React.Component {
      render() {
        return <WrappedComponent {...props} />
      }
    }
  }

  // Wrapped component const Content = (props) => {
    return (
      <div>
        <input type="password" ref={props.forwardedRef} />
      </div>
    );
  };

  // Packaging process export default Hoc(Content);

* */