Вызов дочернего метода из родительского класса

Question

Как мне вызвать дочерний метод из родительского класса?или, проще говоря, как назначить ссылку на ReactElement?

Я видел примеры, когда ref присваивается HTMLDivElement или HTMLInputElement, но не ReactElement.

class Example extends React.Component<Props, State> {
  ...
  childRef = React.createRef<React.ReactElement>();
  ...
  next = () => {
    this.childRef.someFunction();
  }

  render() {
    <Child ref={this.childRef}/>
  }
}

Приведенный выше код дает мне две ошибки:

Generic type 'ReactElement<P>' requires 1 type argument(s).
Property 'someFunction' does not exist on type 'RefObject<any>'.

Answer 1

Когда вы используете React.createRef(), результирующий объект выглядит как {current : null}.Затем React присваивает любой фактической ссылке refObject.current.

. Итак, в вашем примере вам нужно this.childRef.current.someFunction().

. Возможно, вам также понадобится сделать несколько объявлений TypeScript, чтобы сообщить об этом.объект, сохраненный внутри ссылки, имеет эту функцию доступной.

Answer 2

Основная проблема React.createRef<React.ReactElement>().Вам нужно изменить ReactElement на нужный вам тип, в данном случае Child.

Еще одна проблема в this.childRef.someFunction();.Это отсутствует .current.тогда это будет this.childRef.current.someFunction();.

Вот полный пример:

Или попробуйте демо-версию на CodeSandbox

import * as React from "react";
import { render } from "react-dom";

interface ChildState {
  lastCalled?: Date
}

class Child extends React.Component<{}, ChildState> {
  state: ChildState = {};

  render() {
    if (!this.state.lastCalled) {
      return "Not called yet";
    }

    return `Last called at ${this.state.lastCalled.toLocaleTimeString()}`;
  }

  someFunction = () => {
    this.setState({
      lastCalled: new Date()
    });
  };
}

class App extends React.Component {
  childRef = React.createRef<Child>();

  next = () => {
    if (!this.childRef.current) {
      return;
    }

    this.childRef.current.someFunction();
  };

  render() {
    return (
      <React.Fragment>
        <Child ref={this.childRef} />
        <div>
          <button type="button" onClick={this.next}>
            Next Call
          </button>
        </div>
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById("root"));

Обновление -16 мая 2019 года:

Когда я открыл приведенный выше пример CodeSandBox и обновил его до последних зависимостей, он, похоже, не понравился:

childRef = React.createRef<Child>();

Выдает ошибку на закрывающей скобке ).

Чтобы заставить его работать, я изменил его на:

childRef:React.RefObject<Child> = React.createRef();

Answer 3

Я думаю, вам нужно передать функцию для присвоения ссылочной переменной.

private childRef: any;
private assignRef = (ref) => this.childRef = ref;

next = () => {
    this.childRef.someFunction();
}

render() {
    <Child ref={this.assignRef}/>
}