React操作DOM之forwardRef问题

2023-03-02 20:46

短信预约 -IT技能 免费直播动态提醒

React操作DOM之forwardRef

React操作DOM有几种方式，传入字符串，传入一个对象(react推荐的方式)，传入一个函数，今天就讲一下使用react封装过的高阶组件forwardRef来操作DOM

首先导入

import React, { PureComponent,createRef,forwardRef } from 'react'

然后const一个函数组件，将它作为App的子组件

const Profile = forwardRef(function (props,ref){
  return <h2 ref={ref}>Profile</h2>
})

定义App组件

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.profileRef = createRef()
  }
  render() {
    return (
      <div>
        <Profile ref={this.profileRef} name={'lsh'}/>
        <button onClick={e=>this.printRef()}>点击</button>
      </div>
    )
  }
  printRef(){
    console.log(this.profileRef.current)
  }
}

当我们点击按钮时候

用这个的好处是什么？因为我们之前操作dom，函数式组件是不行的，因为它没有实例，用这个高阶组件就能完美解决这个问题

React forwardRef使用方法

作用与注意点

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

父 -> 子 -> 子(Dom)

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

父 -> 子 -> 子(class)

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>
    )
  }
};