属性项目在类型{{}中丢失，但在Readonly <Props>中是必需的

Question

我正在尝试将FirstTab内容导入Assets.tsx内，就像StackBlitz编辑器代码here中的工作示例所示。在编辑器示例中，FirstTab组件被导入到index.tsx中。

我的Assets.tsx如下：

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";
;
declare global {
  // eslint-disable-next-line
  namespace JSX {
    interface IntrinsicElements {
      FirstTab: any;
    }
  }
}

import FirstTab from "./FirstTab";

type Props = {
  project
};


export interface AssetsState extends IGridProps {
    project: {}
}


export class Assets extends React.PureComponent<Props, AssetsState> {
     private projectSpacesGridElement = React.createRef<HTMLDivElement>();
     private myTabs = React.createRef<JqxTabs>();

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

  public render() {

    return (
      <div>
      <JqxTabs
        ref={this.myTabs}
        theme={"arctic"}
        width="1390px"
        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 >
          <div id="jqxGrid" ref={this.projectSpacesGridElement} />
        </div>

      </JqxTabs>
  </div>

    );
  }

private initWidgets = (tab: any) => {
    switch (tab) {
      case 0:
        render(<FirstTab/>, this.projectSpacesGridElement.current!);
        break;

    }
  };

}

我的FirstTab.tsx如下：

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

type Props = {
    project
};

export interface PSState extends IGridProps {
       project: {}
    }

export default class FirstTab extends React.Component<Props, PSState> {

   private assetsDataGrid = React.createRef<JqxGrid>();
   private baseUrl = properties.baseUrlWs;


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

    }// End of Constructor

   render() {

    const source: any = {
      datafields: [
        { name: "id", type: "long" },
        { name: "assetsTypeId", type: "long" }
       ],
     deleterow: (rowid: number,commit:any): void => {
         commit(true);
      }, 
     datatype: "json",
      root: "company",
      url: this.baseUrl + `api/records/search/getNumbers`
    };
    return (
        <div>
         <JqxGrid
            ref={this.assetsDataGrid}
            width={"100%"}
            height={"100%"}
            theme={"arctic"}
           />        

          </div>

      );
    }
}//End of the Class

这是我在Visual Studio代码IDE中出现在第81行上的错误的屏幕截图。

上述错误的基于文本的描述：

在此行render(<FirstTab/>, this.projectSpacesGridElement.current!);上，<FirstTab/>引发错误：类型project中缺少属性{}，但类型为Readonly<Props>中必需。ts（2741 ）

我不明白的另一件事是为什么我遇到与render相关的错误，如下面的屏幕快照所示。我在上面分享的StackBlitz编辑器的工作示例中没有错误：

上述错误的基于文本的描述：

在此行render(<FirstTab/>, this.projectSpacesGridElement.current!);上，我看到render方法发生错误，该方法显示Cannot find render . Did you mean the instance member this.render`？ ts（2663）

Answer 1

由于某种原因，您定义了Props类型，并说您的props需要在其中包含项目类型。我认为您不需要任何代码，应该删除它。

type Props = {
  project
};

通常，在定义自定义道具类型时，应给它一个不同的名称，例如MyComponentPropType = {}。