reactjs - 带有 React 的 TypeScript | 类型元素的反应组件参数不可分配给类型参数

Question

我正在使用 React 15.4.2。我正在尝试用 for 循环中的多个组件填充“SingleEvent”组件类型的数组。我想稍后在渲染方法中使用它。

我的代码如下所示：

      for (let i = 0; i < res.value.length; i++) {
            let event = res.value[i];
            events.push(
              <SingleEvent eventEndDate = {event.EndTime || ""} eventName= {event.Title} eventStartDate= {event.StartTime || ""}
               numOfAttendees = {event.RSVP ? event.RSVP.length : 0}
              eventId= {event.Id} shortDesc= {event.ShortDescription}
              currUserEmail= {ctx.pageContext.user.loginName}
              rsvps= {event.RSVP? event.RSVP.map(({Name}) => Name)  : []}
              description= {event.Description}/>
            );
          }

单个事件道具如下所示：

    export interface ISingleEventProps{
        eventId: string; 
        eventName: string; 
        eventStartDate: string; 
        eventEndDate: string; 
        numOfAttendees: number;
        shortDesc: string;
        currUserEmail: string;
        rsvps?: string[]
        description: string;
    }

它给了我这个错误：

“Element”类型缺少“SingleEvent”类型的以下属性：getMonthNames、openEventDetails、render、setState 和另外 4 个。

它期望我在组件中拥有的功能也是属性。

我正在使用 TypeScript，所以我的文件扩展名是 .tsx

编辑 单个事件组件如下所示：

import * as React from "react";
import styles from "./SingleEvent.module.scss";
import { ISingleEventProps } from "./ISingleEventProps";
import { ISingleEventState } from "./ISingleEventState";
import * as alertify from "alertifyjs";
import "../../../../../node_modules/alertifyjs/build/css/alertify.min.css";

export default class SingleEvent extends React.Component<
  ISingleEventProps,
  ISingleEventState
> {


 private getMontNames = () => {
    return [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ];
  }

 private openEventDetails = (day, month) => {
    let message = `
    <div class=${styles.eventDetailsLefColumn}>
      <h4>${day}</h4>
      <h5>${month}</h5>
    </div>
    <div class=${styles.eventDetailsMiddleColumn}>
      <h3>${this.props.eventName}</h3>
      <p>${this.props.shortDesc}</p>
      <h5>Number of attendees: ${this.props.numOfAttendees}</h5>

    </div>

 `;
    alertify.alert(this.props.eventName, message);
  };

  public render(): React.ReactElement<ISingleEventProps> {


    let startDate = new Date(this.props.eventStartDate);
    let day = startDate.getDate();
    let month = this.getMontNames[startDate.getMonth()];
    let userId = this.props.currUserEmail.split("\\").join("");

    let rsvp = this.props.rsvps.some(email => {
      return (
        email
          .substring(email.indexOf("|") + 1)
          .split("\\")
          .join("") === userId
      );
    }) ? (
      <a className={styles.btnRemoveReservation}>Cancel my reservation</a>
    ) : (
      <a className={styles.btnAddReservation}>Reserve a spot!</a>
    );

    return (
      <div className={styles.container}>
        <div className={styles.leftColumn}>
          <h4>{day}</h4>
          <h5>{month}</h5>
        </div>
        <div className={styles.middleColumn}>
          <h3>
            <a onClick={() => this.openEventDetails(day, month)}>
              {this.props.eventName}
            </a>
          </h3>
          <p>{this.props.shortDesc}</p>
        </div>
        <div className={styles.rightColumn}>
          <h5>Number of attendees: {this.props.numOfAttendees}</h5>
          {rsvp}
        </div>
      </div>
    );
  }
}

标签： reactjstypescript