Question

如何从不同的类调用方法。我一直在寻找React入门，但是所有示例都与渲染组件有关。我只想设置一些变量。

我已经尝试过了。如何从App类调用testMethod？

     class App extends React.Component {
      constructor(props) {
        super(props);
       this.myRef = React.createRef();
       }  

    componentDidMount() {
    this.myRef.current.testMethod();
    {

    }

render(){
return(
<TestClass ref={this.myRef} />
)
}
    export default App;

第二堂课

  class TestClass extends React.Component 
{

    testMethod = () => {
        console.log("testMethod")
    }

    render(){
        return(
            <h1>Hello</h1>
        )
    }
}

但出现错误

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Answer 1

为了利用ref来访问组件方法，您需要渲染该组件并将ref实例分配给它

class App extends React.Component {
  constructor(props) {
    super(props);
    this.TestClass = React.createRef();
   }  

   componentDidMount() {
       this.TestClass.testMethod();
   }
   render() {
       return <TestClass ref={this.TestClass} />
   }
}
export default App;

，或者如果您不打算在App内部渲染组件，但仍想对另一个组件的方法进行分类，则可以在组件中将方法声明为static，但是如果这样做，您将不会能够访问方法内部的this。

class TestClass extends React.Component {

    static testMethod(){
        console.log("testMethod")
    }

}

class App extends React.Component {
  constructor(props) {
    super(props);
   }  

   componentDidMount() {
       TestClass.testMethod();
   }

}
export default App;

Answer 2

要从App类内部调用testMethod（），必须将它作为道具传递给App组件：

class TestClass extends React.Component 
{
    testMethod = () =>{
        console.log("testMethod")
    }
render(){
return {
<App testMethod={testMethod} />  //How to access App?
}
}


 class App extends React.Component {
  constructor(props) {
    super(props);

   }  

componentDidMount() {
this.props.testMethod();
}
export default App;


}

Answer 3

在HTML元素上使用ref属性时，使用React.createRef（）在构造函数中创建的ref会接收底层的DOM元素作为其当前属性。

在自定义类组件上使用ref属性时，ref对象将接收该组件的已安装实例作为其当前实例。

所以：在您的App Class文件中

import * as React from 'react';
import TestClass from './TestClass';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    this.myRef.current.testMethod();
  }
  render() {
     return <TestClass ref={this.myRef} />
  }
}
export default App;

在您的TestClass文件中：

import * as React from 'react';
class TestClass extends React.Component {
   testMethod = () => {
     console.log('test');
   }
   render() {
     return <div>Test</div>
   }
}
export default TestClass;

React不能调用方法

3 个答案: