使用React无法将“ this”绑定到Node中的导入文件

Question

我正在开发一个React App，并一直在进行一些重构以将功能分离到单独的文件中。但是，我很难确保在文件之间正确地来回传递数据。

预期的行为：main中的MainTable将在导入的maintable文件中引用MainTable类。在上述类中，由于“ this”已绑定到该类，因此自创建“”以来，MainTable类应从组件“ App”继承“ this”的属性。这是以前将maintable函数包含在App组件中时发生的情况-将函数分离到单独的文件中会破坏正确的行为。

实际行为：“此”属性未传递给maintable.js，而是提供了null。

这是带有函数（main.js）调用的主文件：

import MainTable from './app/components/input_table/maintable';

let MainTableF = new MainTable;
export default class App extends React.Component {

    constructor(props){
      //properties
      super(props);
      this.props.inputId = 0


      //state
      this.state = {
...

      }

      this.MainTable = this.MainTable.bind(this);
    }

    //Pull in external functions


    MainTableF;  //HERE is where I pull in the maintable class into my app.  
//Previously this was separate and it worked fine. 



...The rest of the code here.

以及包含MainTable类的maintable文件：

import React from 'react';

import {App} from '../../../main';

const MainTable = function MainTable(event){

        //Idea 1: for each element of the table, make sure to 


             inputId = this.state.cellValues.cellId;

             console.log("The Rows are:"+this.state.gridState[length-1].rows);

...some code using this data

如何确保将数据从调用文件相应地传递到功能文件？