javascript - 如何从父组件调用 React/Typescript 子组件的函数？

我正在尝试在父组件中使用子组件的函数 "changeName"。收到错误 Property 'superheroElement' does not exist on type 'App'。解决这个问题的最佳方法可能是什么？子组件和父组件如下

import React,{Component} from 'react';
class Superhero extends React.Component {
    state = {
      name: "Batman"
    };
    changeName = () => {
    this.setState({
       name: "Bruce Wayne"
    });
  };
   render(){
      return <div>{this.state.name}</div>;
   }
}
export default Superhero;

import React, { Component, RefObject } from 'react';
import Superhero from './child'
class App extends React.Component<any , any> {  
  constructor(props:any) {
    super(props);
    this.superheroElement = React.createRef();
  }
  handleClick = () => {
    this.superheroElement.current.changeName();
  };
  render() {return 
           <div><Superhero ref={this.superheroElement}/>
          <button onClick={this.handleClick}>real name</button></div>
  }
}
export default App;  

答案＃1

首先，我认为这不是 React 应用的最佳做法，因为这违背了 React 的单向数据流。因此，这个 ref 的想法应该只作为最后的手段。

对于你的问题，防止错误的最简单方法是将 superheroElement 设置为 any。

import React from 'react';
import Superhero from './child'
class App extends React.Component<any, any> {

  superheroElement: any;

  constructor(props: any) {
    super(props);
    this.superheroElement = React.createRef();
  }
  handleClick = () => {
    this.superheroElement.current.changeName();
  };
  render() {return 
           <div><Superhero ref={this.superheroElement}/>
          <button onClick={this.handleClick}>real name</button></div>
  }
}
export default App;  

这样，错误就会消失。但是，如果你想保留 TypeScript 功能，你可以给 RefObject 指定类型。

import React, { RefObject } from 'react';
import Superhero from './child';
class App extends React.Component<any, any> {
  superheroElement: RefObject<Superhero>;

  constructor (props: any) {
    super(props);
    this.superheroElement = React.createRef();
  }

  handleClick = () => {
    if (this.superheroElement.current)
      this.superheroElement.current.changeName();
  };

  render () {
    return (
      <div>
        <Superhero ref={this.superheroElement} />
        <button onClick={this.handleClick}>real name</button>
      </div>
    );
  }
}
export default App;

注意：你可以将子元素的类型传递给 createRef。

this.superheroElement = React.createRef<Superhero>();