Question

我正在将代码从index.tsx分离成两个不同的文件，即firstTab.tsx和secondTab.tsx。我尚未开始从事secondTab.tsx的工作。

我将第一个与制表符相关的代码分离到firstTab.tsx中，如following code editor所示：两个制表符都在index.tsx中工作的完整功能代码粘贴如下：

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";
import firstTab from './firstTab';

interface AppProps {}
interface AppState {
  name: string;
}
interface IProps extends IGridProps {
  dropdownlistSource: IDropDownListProps["source"];
}

class App extends Component<{}, IProps> {
  private myTabs = React.createRef<JqxTabs>();
  private gridElement = React.createRef<HTMLDivElement>();
  private myGrid = React.createRef<JqxGrid>();
  private gridElementTwo = React.createRef<HTMLDivElement>();
  private myGrid2 = React.createRef<JqxGrid>();

  constructor(props: {}) {
    super(props);
   this.state = {

      dropdownlistSource: [
        { value: 0, label: "Affogato" },
        { value: 1, label: "Americano" },
        { value: 2, label: "Bicerin" },
        { value: 3, label: "Breve" }
      ]
     };
  }
  public render() {
    return (
      <JqxTabs
        ref={this.myTabs}
        // @ts-ignore
        width={400}
        height={560}
        initTabContent={this.initWidgets}

      >
      <ul>
          <li style={{ marginLeft: 30 }}>
            <div style={{ height: 20, marginTop: 5 }}>
               <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                US Indexes
              </div>
            </div>
          </li>
          <li>
            <div style={{ height: 20, marginTop: 5 }}>
              <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",
      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
                  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);
        }
    });

    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}
        />

    );
    render(grid, this.gridElement.current!);
  }; 

  private initGrid2 = () => {
    const source = {
      datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
      datatype: "csv",
      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
                  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);

      }
    });

    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}

      />

    );
    render(grid, this.gridElementTwo.current!);
  };


  private initWidgets = (tab: any) => {
    switch (tab) {
      case 0:
        this.initGrid();
        break;
      case 1:
        this.initGrid2();
        break;
    }
  };

}

render(<App />, document.getElementById("root"));

问题：

由于我已经将private initGrid = () => {移到了单独的文件firstTab.tsx中，因此在index.tsx中应该放置{firstTab.tsx}来确保index.tsx中的两个标签工作良好？我的意思是，即使我从private initGrid = () => {中删除了index.tsx函数，两个选项卡也应该可以正常工作。

谢谢

Answer 1

如果我要重构它，我会考虑下一种方法：

创建父组件表（可能是一些更合适的名称）
为美国指数创建一个组件
与标准普尔500相比，为纳斯达克创建一个组件
基于活动选项卡呈现适当的组件。

Answer 2

您还可以创建一个单独的文件，其中仅包含数据导出。然后，如果您使用可以在其中使用的功能将其导入文件，请保持文件清洁。

如果将数据作为prop / param传递给initGrid（）函数，则无需重复该代码，就可以重复使用。

将大型组件分解为较小的组件

2 个答案: