所以我目前正在做这个项目，该项目由 Sharepoint Online 和 React TS 组成。我目前正在构建一个下拉菜单，并为下拉菜单创建了道具和方法，但是，我不断收到错误消息：
“卡片”类型上不存在属性“下拉菜单”。
类型“Readonly<{}> & Readonly<{children?:ReactNode;}>”上不存在属性“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
提前感谢任何帮助的人。