我是React的新手，我在this editor中引用了很好的代码。在下面粘贴相同的代码：
import React, { Component } from "react";
import { render } from "react-dom";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import JqxButton from "jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons";
import * as ReactDOM from "react-dom";
import JqxWindow from "jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow";
import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";
import JqxChart, {
IChartProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxchart";
import JqxGrid, {
IGridProps,
jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import JqxTabs from "jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs";
import JqxDropDownList, {
IDropDownListProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist";
interface AppProps {}
interface AppState {
name: string;
}
interface IProps extends IGridProps {
rendertoolbar1: IGridProps["rendertoolbar"];
dropdownlistSource: IDropDownListProps["source"];
}
class App extends Component<{}, IProps> {
private myTabs = React.createRef<JqxTabs>();
private gridElement = React.createRef<HTMLDivElement>();
private gridElementTwo = React.createRef<HTMLDivElement>();
private myGrid = React.createRef<JqxGrid>();
private myGrid2 = React.createRef<JqxGrid>();
private myWindow = React.createRef<JqxWindow>();
private myWindowTWO = React.createRef<JqxWindow>();
private date = React.createRef<JqxInput>();
private sAndP500 = React.createRef<JqxInput>();
constructor(props: {}) {
super(props);
this.saveBtn = this.saveBtn.bind(this);
this.cancelBtn = this.cancelBtn.bind(this);
this.saveBtntwo = this.saveBtn.bind(this);
this.cancelBtntwo = this.cancelBtn.bind(this);
const rendertoolbar = (toolbar: any): void => {
const addRowClick = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindow.current!.open();
};
const addRowClickTwo = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindowTWO.current!.open();
};
ReactDOM.render(
<div style={{ margin: "5px" }}>
<div
id="buttonContainer2"
style={{ float: "left", marginLeft: "5px" }}
>
<JqxButton
onClick={addRowClickTwo}
width={125}
value={"Add New NASDAQ"}
/>
</div>
</div>,
toolbar[0]
);
};
const rendertoolbar1 = (toolbar: any): void => {
const addRowClick = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindow.current!.open();
};
const addRowClickTwo = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindowTWO.current!.open();
};
ReactDOM.render(
<div style={{ margin: "5px" }}>
<div id="buttonContainer1" style={{ float: "left" }}>
<JqxButton
onClick={addRowClick}
width={135}
value={"Add New Us Index"}
/>
</div>
</div>,
toolbar[0]
);
};
this.state = {
rendertoolbar,
rendertoolbar1,
// dropdownlistSource: ["Affogato", "Americano", "Bicerin", "Breve"]
dropdownlistSource: [
{ value: 0, label: "Affogato" },
{ value: 1, label: "Americano" },
{ value: 2, label: "Bicerin" },
{ value: 3, label: "Breve" }
]
//source: new jqx.dataAdapter(source)
};
}
public render() {
return (
<JqxTabs
ref={this.myTabs}
// @ts-ignore
width={400}
height={560}
initTabContent={this.initWidgets}
onSelected={this.onTabSelected}
>
<JqxWindow
ref={this.myWindow}
width={250}
height={230}
resizable={false}
isModal={false}
autoOpen={false}
modalOpacity={"0.01"}
position={{ x: 68, y: 368 }}
>
<div>Add New US Indexes</div>
<div style={{ overflow: "hidden" }}>
<table>
<tbody>
<tr>
<td align={"right"}>Date:</td>
<td align={"left"}>
<JqxInput ref={this.date} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"}>S & P 500:</td>
<td align={"left"}>
<JqxInput ref={this.sAndP500} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"}>DropDownList:</td>
<td align={"left"}>
<JqxDropDownList
width={100}
height={20}
source={this.state.dropdownlistSource}
selectedIndex={0}
/>
</td>
</tr>
<tr>
<td align={"right"} />
<td style={{ paddingTop: "10px" }} align={"right"}>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.saveBtn}
width={50}
>
Save
</JqxButton>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.cancelBtn}
width={50}
>
Cancel
</JqxButton>
</td>
</tr>
</tbody>
</table>
</div>
</JqxWindow>
<JqxWindow
ref={this.myWindowTWO}
width={250}
height={230}
resizable={false}
isModal={false}
autoOpen={false}
modalOpacity={"0.01"}
position={{ x: 68, y: 368 }}
>
<div>Add New NASDAQ</div>
<div style={{ overflow: "hidden" }}>
<table>
<tbody>
<tr>
<td align={"right"}>Date:</td>
<td align={"left"}>
<JqxInput ref={this.date} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"}>S & P 500:</td>
<td align={"left"}>
<JqxInput ref={this.sAndP500} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"} />
<td style={{ paddingTop: "10px" }} align={"right"}>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.saveBtntwo}
width={50}
>
Save
</JqxButton>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.cancelBtntwo}
width={50}
>
Cancel
</JqxButton>
</td>
</tr>
</tbody>
</table>
</div>
</JqxWindow>
<ul>
<li style={{ marginLeft: 30 }}>
<div style={{ height: 20, marginTop: 5 }}>
<div style={{ float: "left" }}>
<img width="16" height="16" src="./../images/catalogicon.png" />
</div>
<div
style={{
marginLeft: 4,
verticalAlign: "middle",
textAlign: "center",
float: "left"
}}
>
US Indexes
</div>
</div>
</li>
<li>
<div style={{ height: 20, marginTop: 5 }}>
<div style={{ float: "left" }}>
<img width="16" height="16" src="./../images/pieicon.png" />
</div>
<div
style={{
marginLeft: 4,
verticalAlign: "middle",
textAlign: "center",
float: "left"
}}
>
NASDAQ compared to S&P 500
</div>
</div>
</li>
</ul>
<div style={{ overflow: "hidden" }}>
<div id="jqxGrid" ref={this.gridElement} />
<div style={{ marginTop: 10, height: "15%" }} />
</div>
<div style={{ overflow: "hidden" }}>
<div id="jqxGrid2" ref={this.gridElementTwo} />
<div style={{ marginTop: 10, height: "15%" }} />
</div>
</JqxTabs>
);
}
private initGrid = () => {
const source = {
datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
datatype: "csv",
//url: './assets/nasdaq_vs_sp500.txt'
localdata: `1/2/2014,1831.98,4143.07
1/3/2014,1831.37,4131.91
1/6/2014,1826.77,4113.68
1/7/2014,1837.88,4153.18
1/8/2014,1837.49,4165.61
1/9/2014,1838.13,4156.19
1/10/2014,1842.37,4174.67
1/13/2014,1819.2,4113.3
1/14/2014,1838.88,4183.02
1/15/2014,1848.38,4214.88
1/16/2014,1845.89,4218.69
1/17/2014,1838.7,4197.58
1/21/2014,1843.8,4225.76
1/22/2014,1844.86,4243
1/23/2014,1828.46,4218.88
1/24/2014,1790.29,4128.17
1/27/2014,1781.56,4083.61
1/28/2014,1792.5,4097.96
1/29/2014,1774.2,4051.43
1/30/2014,1794.19,4123.13
1/31/2014,1782.59,4103.88
2/3/2014,1741.89,3996.96
2/4/2014,1755.2,4031.52
2/5/2014,1751.64,4011.55
2/6/2014,1773.43,4057.12
2/7/2014,1797.02,4125.86`
};
const dataAdapter = new jqx.dataAdapter(source, {
async: false,
loadError: (xhr: any, status: any, error: any) => {
console.log(xhr, status, error);
//alert('Error loading "' + source.url + '" : ' + error);
}
});
const columns: IGridProps["columns"] = [
{ cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
{ datafield: "S&P 500", text: "S&P 500", width: 150 },
{ datafield: "NASDAQ", text: "NASDAQ" }
];
const grid = (
<JqxGrid
ref={this.myGrid}
width={"100%"}
height={400}
source={dataAdapter}
columns={columns}
showtoolbar={true}
rendertoolbar={this.state.rendertoolbar1}
/>
);
render(grid, this.gridElement.current!);
};
private saveBtn(): void {
this.myWindow.current!.hide();
}
private cancelBtn(): void {
this.myWindow.current!.hide();
}
private initGrid2 = () => {
const source = {
datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
datatype: "csv",
//url: './assets/nasdaq_vs_sp500.txt'
localdata: `1/2/2014,1831.98,4143.07
1/3/2014,1831.37,4131.91
1/6/2014,1826.77,4113.68
1/7/2014,1837.88,4153.18
1/8/2014,1837.49,4165.61
1/9/2014,1838.13,4156.19
1/10/2014,1842.37,4174.67
1/13/2014,1819.2,4113.3
1/14/2014,1838.88,4183.02
1/15/2014,1848.38,4214.88
1/16/2014,1845.89,4218.69
1/17/2014,1838.7,4197.58
1/21/2014,1843.8,4225.76
1/22/2014,1844.86,4243
1/23/2014,1828.46,4218.88
1/24/2014,1790.29,4128.17
1/27/2014,1781.56,4083.61
1/28/2014,1792.5,4097.96
1/29/2014,1774.2,4051.43
1/30/2014,1794.19,4123.13
1/31/2014,1782.59,4103.88
2/3/2014,1741.89,3996.96
2/4/2014,1755.2,4031.52
2/5/2014,1751.64,4011.55
2/6/2014,1773.43,4057.12
2/7/2014,1797.02,4125.86`
};
const dataAdapter = new jqx.dataAdapter(source, {
async: false,
loadError: (xhr: any, status: any, error: any) => {
console.log(xhr, status, error);
//alert('Error loading "' + source.url + '" : ' + error);
}
});
const columns: IGridProps["columns"] = [
{ cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
{ datafield: "S&P 500", text: "S&P 500", width: 150 },
{ datafield: "NASDAQ", text: "NASDAQ" }
];
const grid = (
<JqxGrid
ref={this.myGrid2}
width={"100%"}
height={400}
source={dataAdapter}
columns={columns}
showtoolbar={true}
rendertoolbar={this.state.rendertoolbar}
/>
);
render(grid, this.gridElementTwo.current!);
};
private saveBtntwo(): void {
this.myWindowTWO.current!.hide();
}
private cancelBtntwo(): void {
this.myWindowTWO.current!.hide();
}
private initWidgets = (tab: any) => {
switch (tab) {
case 0:
this.initGrid();
break;
case 1:
this.initGrid2();
break;
}
};
private onTabSelected = (event: any) => {
switch (event.args.item) {
case 0:
// this.hideButton();
break;
case 1:
// this.showButton();
break;
}
};
}
render(<App />, document.getElementById("root"));
由于代码增长迅速，我想将private initGrid = () => {}和private initGrid2 = () => {}函数相关的代码分别移到两个文件中，即firstTab.tsx和secondTab.tsx。这是new editor code，有两个文件。
我希望这是最好的事情，并且想知道我应该如何在两个文件中移动两个函数，然后在index.tsx中调用这两个函数？因为，我创建的两个文件对我来说更像是一个单独的组件，如果我必须创建一个新组件，还需要定义渲染方法吗？