javascript - 从另一个类调用导出类中另一个函数的函数

Question

我遇到了以下场景的问题，函数 foo 没有作为 B 类中 Button 上的单击事件的一部分被调用，我该如何实现这一点？(我知道标题很糟糕，请随意更改)

A.js
----

import React, { Component } from 'react';
import B from './B';


class A extends Component {

  foo = () => {
    console.log("called foo");
    /* some code */
  }
  
  bar = () => {
    console.log("called bar");
    /* some more code */
    this.foo();
  }
  
  
  render() {
    return (<B bar={this.bar} />);
  }

}

B.js
----

import React, { Component } from 'react';

class B extends Component {

  render() {
    return (<button onClick={() => this.props.bar()} />);    
  }

}

Answer 1

渲染方法应使用返回语法来返回 JSX 元素。按照下面的建议向这两个组件添加 return ，以便它们按照您的需要工作

A.js

render() {
    return(<div><B bar={this.bar} /></div>)
}

B.js

render() {
    return(<div><Button onClick={() => this.props.bar()} /> </div>)
 }

请注意，如果您使用的是最新的 React 版本，请使用 React.Fragment 代替 div，否则 div 就可以了