首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ReactJS -无法获取重构后从单独文件加载值的函数

ReactJS -无法获取重构后从单独文件加载值的函数
EN

Stack Overflow用户
提问于 2018-07-05 07:03:00
回答 1查看 36关注 0票数 0

在尝试将React中的App类中的函数分解为单独的文件后,我正在处理一系列导入/导出问题,不知道是否可以获得一些建议:

首先,从其他文件/类中的类中分离出函数是一件合乎逻辑的事情吗?

第二,这是我遇到的一个具体问题:

渲染预期行为:函数MainTable.tableGen()应该返回一个应用程序的()可以处理的值。

实际行为:遍历调试器显示tableGen()没有被触发,但是它被识别了。换句话说,它不是运行函数并返回值,而是在打印时返回函数。

Main.js:

代码语言:javascript
复制
import MainTable from './app/components/input_table/maintable';

export default class App extends React.Component {
    constructor(props){
      this.MainTable = this.MainTable.bind(this);
}

MainTable(){
MainTable.tableGen();  //Call the function that's in the external file here
}
render(){
        return (
          <div>
          <table>
          <tbody onLoad = {this.broadcast()}>  
            {this.MainTable}  //The MainTable.tableGen() function populates the table using a series of loops 
          </tbody>
          </table>
          <ButtonMenu onRow = {this.onRowButton} onCol = {this.onColumnButton} undo ={this.onUndoAction} redo = {this.onRedoAction} reset = {this.onResetAction} />
          </div>

        );
      }

}

maintable.js:

代码语言:javascript
复制
class baseTable extends React.Component{
  constructor(props){
    //properties
    super(props);
  }

 tableGen(){


... function code here...

}
const MainTable = new baseTable; 

export default MainTable;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-05 09:08:37

确保您的tableGen()返回JSX,不带引号。

代码语言:javascript
复制
return <h3>Hello World</h3>;

然后,您的MainTable函数应该有return关键字:

代码语言:javascript
复制
MainTable() {
  return MainTable.tableGen();
}

并且,在JSX中引用该函数时,请调用该函数:

代码语言:javascript
复制
{this.MainTable()}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51181620

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档