React forwardRef的使用方法及注意点

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 = () => {
  // 创建一个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';


const Content = (props, ref) => {
  return (
    <div>
   	  {}
      <input type="passWord" ref={ref} />
    </div>
  )
};

export default forwardRef(Content);

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';


const Content = (props, ref) => {
  return (
    <div>
      {}
      <Header ref={ref} />  {}
		
      {}
    </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>
    )
  }
};