在尝试将React中的App类中的函数分解为单独的文件后,我正在处理一系列导入/导出问题,不知道是否可以获得一些建议:
首先,从其他文件/类中的类中分离出函数是一件合乎逻辑的事情吗?
第二,这是我遇到的一个具体问题:
渲染预期行为:函数MainTable.tableGen()应该返回一个应用程序的()可以处理的值。
实际行为:遍历调试器显示tableGen()没有被触发,但是它被识别了。换句话说,它不是运行函数并返回值,而是在打印时返回函数。
Main.js:
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:
class baseTable extends React.Component{
constructor(props){
//properties
super(props);
}
tableGen(){
... function code here...
}
const MainTable = new baseTable;
export default MainTable;
发布于 2018-07-05 09:08:37
确保您的tableGen()
返回JSX,不带引号。
return <h3>Hello World</h3>;
然后,您的MainTable函数应该有return
关键字:
MainTable() {
return MainTable.tableGen();
}
并且,在JSX中引用该函数时,请调用该函数:
{this.MainTable()}
https://stackoverflow.com/questions/51181620
复制相似问题