Question

我想通过地图将道具从一个组件发送到另一个组件。以前做过，但是使用打字稿会引起问题。

首先，我在导入两个组件的单独文件中定义了类型/接口：

 export interface ItemsProps {
 description?:string;

}

export interface Project {
Description: string;

}

然后，我有了一个容器类，该容器类从提供程序获取数据（该数据有效并且已经过测试）。然后，我尝试将带有地图的数据传递到组件（itemComponent）。

import * as React from "react";
import {itemProps} from "./props";
import {itemComponent} from "./itemComponent";

export class itemContainer  extends React.Component<itemProps, itemState> {
private provider: ProjectItemProvider;

constructor(props: ItemsProps, context: itemsState) {
  super(props, context);
  this.state = {
    listItems: []
  };

private mapResultToProject(result: any[], type: ProjectType): Project {
    let ProjectLeader: string = result[this.props.projectLeaderSearchFieldString];
    if(ProjectLeader) {
      ProjectLeader = ProjectLeader.split('|')[1].trim();
    }

  private getProjectItems()  {
    this.provider.GetSiteItemsByContentId(this.props.publicContentTypeId, this.props.projectSearchFieldStrings).then((items: Project[]) => {
      const i: Project[] = [];
      items.map((result: any) => {
        i.push(this.mapResultToProject(result, ProjectType.Public));
      });
      this.setState({
        listItems: this.state.listItems.concat(i)
      });
    });
  }

public render(): JSX.Element {

          return (
            <div>

             {this.state.listItems.map((item: Project) => {

         <itemComponent

          description =  {item.Description}

          /> })}

            </div>
          )  }}
export default itemContainer;

在组件中，我用props定义了数据显示位置：

import * as React from "react";
import {itemProps} from "./props";
import {itemComponent} from "./itemComponent";

export class itemComponent extends React.Component<itemProps, itemState> {

  constructor(props: itemsProps, context: itemsState) {
    super(props, context);

  }

public render():JSX.Element {

    return (

      <div>
        <p>{this.props.description}</p>
      </div>
);}}

但是什么也没有显示，并且该组件无法获取我从地图作为道具发送给该组件的数据。

将map函数中的props发送到React with Typescript中的另一个组件

0 个答案: