Antd踩坑 — 当子组件是 function component 时使用 wrappedComponentRef

问题起源

父组件想拿到子组件的 ref，使用 antd 的 Form.create() 包装子组件以后，能够经过包装后的组件的 wrappedComponentRef 拿到子组件的实例。可是由于子组件是一个 function component 没有实例，致使不能在子组件上使用 wrappedComponentRef 属性(本质上使用了 ref 属性得到子组件的实例 _class，且 antd 对原本的 ref 属性另外包装了一下，返回的不是子组件的实例 _class)。

解决办法

使用回调函数拿到子组件的 this，或者将函数式组件转化为一个 class

• 一个子组件是 class 的🌰：

class CollectionCreateForm extends React.Component {
    render() {
      const { visible } = this.props;
      return (
        <Modal visible={visible}> <span> hello </span> </Modal>
      );
    }
}

export default class App extends React.Component {
  state = {
    visible: false,
  };
  showModal = () => {
    this.setState({ visible: true });
  };
  saveFormRef = formRef => {
    this.formRef = formRef;
    console.log(this.formRef, "我要输出")
  };

  render() {
    return (
      <div> <Button type="primary" onClick={this.showModal}> New Collection </Button> <CollectionCreateForm ref = {this.saveFormRef} visible = {this.state.visible} /> </div> ); } } 复制代码

• 一个子组件是 function Component 的🌰：

// 子组件改一下就行
function CollectionCreateForm(props){
  const { visible } = props;
    return(
        <Modal visible={visible}> <span> hello </span> </Modal>
      )
}
复制代码

注意了咱们虽然拿不到子组件实例，可是能够拿到子组件中 DOM refs。

无论怎样，你能够在函数组件内部使用 ref 属性，只要它指向一个 DOM 元素或 class 组件

父子组件 ref 传递

那么若是想在父组件中拿到函数式组件里面的 DOM refs 应该怎么作呢？

1. ref 转发：使用 React.forwardRef 函数包装一下 function component

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

React.forwardRef((prop,ref)=>{function component}) 复制代码

eg:

import React, {forwardRef} from 'react';

function ThisWontWork() {
  return <button>Text</button>;
}

const ThisWillWork = forwardRef((props, ref) => { // React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，做为其第二个参数。
  return <button ref={ref}>Text</button>;// 下发 ref 参数，并将其指定给 button 的JSX属性
});

function App() {
const childRef = React.createRef(); 
console.log(childRef) // {current:<button></button>}
  return (
    <Tippy content="Tooltip"> // 拿到子组件的 ref <ThisWillWork ref={childRef}/> </Tippy> ); } 复制代码

2. 使用自定义属性，在函数组件内部使用 ref 属性，只要它指向一个 DOM 元素或 class 组件。

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} /> // 取 props 里面的属性
    </div>
  );
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.inputElement = React.createRef();
  }
  render() {
    return (
      <CustomTextInput inputRef={this.inputElement} />
    );
  }
}
复制代码

3.本身封装一个函数传递到子组件里面去，拿到子组件的 this 或者某个元素的 refs 不使用回调函数的方式：

// 父组件中
<childCom childRef={ refs =>{ this.refs = refs}}>...</childCom> 
// 子组件中
<childCom>
    <div ref={props.childRef}>hello</div>
</childCom>
复制代码