首页 > 解决方案 > ts(1128) - public render() 行需要声明或声明

问题描述

我有以下代码(遵循此示例代码),它编译时没有任何错误。该代码使用示例代码来使用 jQXWidget。

import React from "react";
import * as ReactDOM from "react-dom";
import JqxTabs from "jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs";
import JqxGrid, {
  IGridProps,
  jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import { properties } from ".././properties";


type Props = {
  project
};

export interface MyState extends IGridProps {
  visible: boolean,
  assocProjectElementsVisible: boolean,
  project: {},
  selectedRowIndex: number,
  deleteDialogVisible: boolean
}

export class ProjectElements extends React.PureComponent<Props, MyState> {
  private myTabs = React.createRef<JqxTabs>();
  private projectSpacesGridElement = React.createRef<HTMLDivElement>();
  private pSpacesGridElement = React.createRef<JqxGrid>();
  private baseUrl = properties.baseUrlWs;

  constructor(props: Props) {
    super(props);

    /* const deleteRowClick = () => {
      const selectedrowindex = this.pSpacesGridElement.current.getselectedrowindex();
      if (selectedrowindex > -1) {
        this.setState({
          selectedRowIndex: selectedrowindex,
          deleteDialogVisible: true
        })
      } */

    this.state = {
      visible: false,
      project: {},
      assocProjectElementsVisible: false,
      selectedRowIndex: null,
      deleteDialogVisible: false,
      rendergridrows: (params: any): any[] => {
        const data = params.data;
        return data;
      }
    };
  }

  public render() {

    return (
      <JqxTabs
        ref={this.myTabs}
        theme={"arctic"}
        width="1390px"
        height={560}
        initTabContent={this.initWidgets}
      >
        <ul>
          <li style={{ marginLeft: 30 }}>
            <div style={{ height: 20, marginTop: 5 }}>
              <div style={{ float: "left" }}></div>
              <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                Project Spaces
              </div>
            </div>
          </li>
        </ul>
        <div style={{ overflow: "hidden" }}>
          <div id="jqxGrid" ref={this.projectSpacesGridElement} />
          <div style={{ marginTop: 10, height: "15%", width: "100%" }}></div>
        </div>

      </JqxTabs>
    );
  }

  //Tab 1
  private projectSpacesGrid = () => {
    const source: any = {
      datafields: [
        { name: "id", type: "long" },
        { name: "fileName", type: "string" }
      ],
      datatype: "json",
      root: "ProjectElements",
      url: this.baseUrl + `api/ProjectElements/search/getProjectElementsByProjectId`
    };
    const dataAdapter = new jqx.dataAdapter(source, {
      //async: false,
      autoBind: true,
      downloadComplete: (data: any, status: any, xhr: any): void => {
        source.totalrecords = parseInt(data["page"].totalElements);
      },
      formatData: (data: any): any => {
        data.value = this.props.project.id;
        data.page = data.pagenum;
        data.size = data.pagesize;
        if (data.sortdatafield && data.sortorder) {
          data.sort = data.sortdatafield + "," + data.sortorder;
        }
        return data;
      },
      loadError: (xhr: any, status: any, error: any) => {
        alert('Error loading "' + source.url + '" : ' + error);
      }
    });
    const columns: IGridProps["columns"] = [
      { datafield: "id", text: "ID Number", width: 100 },
      { datafield: "fileName", text: "Project Name", width: 275 }

    ];
    const grid =
      this.state.visible || this.state.assocProjectElementsVisible ? null : (
        <div>
          <JqxGrid
            ref={this.pSpacesGridElement}
            width={"100%"}
            height={"100%"}
            theme={"arctic"}
            source={dataAdapter}
            columns={columns}
          />

        </div>
      );

    ReactDOM.render(grid, this.projectSpacesGridElement.current!);
  };
  private initWidgets = (tab: any) => {
    switch (tab) {
      case 0:
        this.projectSpacesGrid();
        break;

    }
  };
}

但是,一旦我取消注释该方法,我就会在线上deleteRowClick出现错误,如下面的屏幕截图所示:publicpublic render()

在此处输入图像描述

deleteRowClick 取消注释该方法后我做错了什么?

标签: reactjstypescript

解决方案


您在函数}末尾缺少关闭。deleteRowClick


推荐阅读