Шаги Antd в яме — используйте wrapComponentRef, когда дочерний компонент является функциональным компонентом.

React.js

Происхождение проблемы

Родительский компонент хочет получить дочерний компонентref, используя antdForm.create()После упаковки подкомпонента вы можете передать обернутый компонентwrappedComponentRefПолучите экземпляр дочернего компонента. Но потому чтоДочерний компонент является функциональным компонентом без экземпляра, поэтому свойство wrapComponentRef нельзя использовать в дочернем компоненте.(по сути, использует атрибут ref для получения экземпляра дочернего компонента_class, а antd дополнительно оборачивает исходный атрибут ref и возвращает не экземпляр дочернего компонента_class).

Решение

Используйте функцию обратного вызова, чтобы получить дочерний компонентthisили преобразовать функциональный компонент в класс

  • Дочерний компонент — это класс 🌰:
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 CollectionCreateForm(props){
  const { visible } = props;
    return(
        <Modal visible={visible}>
          <span> hello </span>
        </Modal>
      )
}

Обратите внимание: хотя мы не можем получить экземпляр дочернего компонента, мы можем получить ссылки DOM в дочернем компоненте.

Однако вы можете использовать атрибут ref внутри функционального компонента, если он указывает на элемент DOM или компонент класса.

Передача ссылки на родительско-дочерний компонент

Итак, что вам делать, если вы хотите получить ссылки на DOM в функциональном компоненте в родительском компоненте?

  1. рефери вперед:использовать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>
  );
}
  1. Используя пользовательское свойство, используйте атрибут REF внутри функционального компонента, если он указывает на элемент DOM или компонент класса.
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>
Категории