Sharepoint Online + React TS. Свойство 'XXX' не существует для типа 'XXX'

Question

Так что я сейчас работаю над этим проектом, проект состоит из Sharepoint Online и React TS. В настоящее время я создаю раскрывающееся меню и создал реквизиты и методы для раскрывающегося списка, однако я получаю сообщения об ошибках:

1. Свойство dropdownMenu не существует для типа " Карточка '.

2. Свойство' showMenu 'не существует для типа' Readonly <{}> & Readonly <{children?: ReactNode;}> '.

import * as React from "react";
import styles from "./Card.module.scss";
import { Image, IImageProps, ImageFit } from "office-ui-fabric-react/lib/Image";
import { escape } from "@microsoft/sp-lodash-subset";
import {
  DocumentCard,
  DocumentCardDetails,
  DocumentCardImage,
} from "office-ui-fabric-react/lib/DocumentCard";
import { TestImages } from "@uifabric/example-data";


export default class Card extends React.Component {
  constructor() {
    super({});

    this.state = {
      showMenu: false,
    };

    this.showMenu = this.showMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  public showMenu(event) {
    event.preventDefault();

    this.setState({ showMenu: true }, () => {
      document.addEventListener('click', this.closeMenu);
    });
  }

  public closeMenu(event) {
    if(!this.dropdownMenu.contains(event.target)) {

      this.setState({ showMenu: false}, () => {
        document.removeEventListener('click', this.closeMenu);
      });
    }
  }



  public render() {



    return (
      <DocumentCard className={styles.cardContainer}>
        <DocumentCardImage height={120} imageFit={ImageFit.cover} imageSrc={TestImages.documentPreviewTwo} />
        <DocumentCardDetails>
          <button onClick={this.showMenu}>Politicas</button>
          {
            this.props.showMenu            
            ? (
              <div className={styles.menu} ref={(element) => {
                this.dropdownMenu = element;
              }}>
                <ul>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun
                    <ul>
                      <li>Lorem impsun</li>
                      <li>Lorem impsun</li>
                    </ul>
                  </li>
                </ul>
              </div>
            )
            : (
              null
            )
          }
        </DocumentCardDetails>
      </DocumentCard>
    );
  }
}

Строка с ошибками:

1. Строка 34

if(!this.dropdownMenu.contains(event.target))

Строка 54

this.props.showMenu

Заранее спасибо за помощь.

Answer 1

Вы не определили dropdownMenu, определите dropdownMenu в своем классе, чтобы вы могли установить для него ссылку.

Пример демонстрации в моем проекте.

protected slider;

<Slider ref={c => (this.slider = c)} {...settings}>