Sharepoint Online + React TS。类型“XXX”上不存在属性“XXX”答案

【问题标题】：Sharepoint Online + React TS. Property 'XXX' doesn not exist on type 'XXX'Sharepoint Online + React TS。类型“XXX”上不存在属性“XXX”
【发布时间】：2020-05-08 13:28:02
【问题描述】：

所以我目前正在做这个项目，该项目由 Sharepoint Online 和 React TS 组成。我目前正在构建一个下拉菜单，并为下拉菜单创建了道具和方法，但是，我不断收到错误：

“卡片”类型上不存在“下拉菜单”属性。
类型“Readonly & Readonly”上不存在属性“showMenu”。

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>
    );
  }
}

有错误的行：

第 34 行

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

第 54 行

this.props.showMenu

提前感谢任何提供帮助的人。

【问题讨论】：

标签： javascript html sharepoint-online react-tsx

【解决方案1】：

您还没有定义 dropdownMenu，请在您的类中定义 dropdownMenu，以便您可以将 ref 设置为它。

我的项目中的示例演示。

protected slider;

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

【讨论】：