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

Question

我正在尝试在父组件中使用子组件功能 "changeName"。获取错误属性 'superheroElement' 在类型 'App' 上不存在。解决这个问题的最好方法是什么？子组件和父组件如下

</p>

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;

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

这样，错误就会消失。但是，如果您想保留打字稿功能，您可以为 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 child的类型

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

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

How to call React/Typescript child component function from parent component?

javascript

parent-child

typescript

reactjs