Question

我正在尝试在父组件中使用子组件函数“ changeName”。获取错误类型“ App”上不存在“ superheroElement”属性。解决此问题的最佳方法是什么？子组件和父组件如下



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的单向数据流相反。因此，这种参考想法只能是不得已而为之。

对于您的问题，防止错误的最简单方法是将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;

注意：您可以指定要创建的孩子的类型。

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

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

1 个答案: