类型“{}”中缺少属性项目，但在 Readonly<Props> 中是必需的

Question

我正在尝试在 Assets.tsx 中导入 FirstTab 内容，就像 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 findrender. Did you mean the instance memberthis.render`？ ts(2663)

Answer 1

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

type Props = {
  project
};

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