TS错误：类型“ JSX.IntrinsicElements”上不存在属性“ ./PresentationAttributesForm”

Question

我正在创建一个显示演示文稿的网站。当用户单击“编辑”按钮时，他们会看到一个用于编辑演示文稿属性的表单。我很难将演示文稿表单PresentationAttributesForm导入到主演示文稿页面，因为遇到一个错误，提示Property ‘./PresentationAttributesForm' does not exist on type 'JSX.IntrinsicElements’.

我读到有关a similar error的问题，我认为我的错误不是大写错误引起的。另外，我已经安装了@ react / types，并且已经删除了节点模块并重新设置了npm install。我下面有我的源代码。

PresentationAttributes.tsx

import axios from "axios";
import { isNil } from "lodash";
import * as React from "react";
import { Col } from "reactstrap";
import { Presentation, Recording } from "../../lib/Presentation";
import { getAuthRequestHeader } from "../../services/Auth";
import PresentationAttributesForm from "../PresentationAttributesForm";
import PresentationAttributesInfo from "../PresentationAttributesInfo";
import PresentationMetadataItem from "../PresentationMetadataItem";
import PresentationRecording from "../PresentationRecording";
import "./PresentationAttributes.css";
import PresentationAttributesProps from "./PresentationAttributesProps";
import PresentationAttributesState from "./PresentationAttributesState";

// tslint:disable:cyclomatic-complexity
class PresentationAttributes extends React.Component<PresentationAttributesProps, PresentationAttributesState> {
    public state: PresentationAttributesState = {
        displayForm: false,
    };

    public toggleFormDisplay = () => {
        this.setState(previousState => ({
            displayForm: !previousState.displayForm,
        }));
        // tslint:disable-next-line:semicolon
    };

    public render() {
        const { displayForm } = this.state;

        return (
            <div className="Presentation-attributes-main-container">
                <Col sm={9}>
                    {displayForm ? (
                        <PresentationAttributesForm {...this.props.presentation} />
                    ) : (
                        <PresentationAttributesInfo {...this.props.presentation} />
                    )}
                </Col>
                <Col sm={3}>
                    <div className="Presentation-attributes-buttons-container">
                        <button onClick={() => this.toggleFormDisplay()}>Edit Presentation</button>
                        <div className="Presentation-attributes-vimeo-section">
                            {isNil(this.props.Presentation.vimeo_link) ? (
                                <button onClick={() => this.uploadVideo(this.props.Presentation.id)}>
                                    UPLOAD
                                </button>
                            ) : (
                                <a href={this.props.Presentation.vimeo_link}> Vimeo link </a>
                            )}
                        </div>
                    </div>
                </Col>
            </div>
        );
    }
}

export default PresentationAttributes;

PresentationAttributesProps.tsx

import { Presentation } from "../../lib/Presentation";

export default interface PresentationAttributesProps {
    meeting: Presentation;
}

PresentationAttributesState.tsx

export default interface PresentationAttributesState {
    displayForm: boolean;
}

PresentationAttributesForm.tsx

import * as React from "react";
import { Presentation } from "../../lib/Presentation";

export class PresentationAttributesForm extends React.Component<{}, Presentation> {
    public render() {
        return (
            <div>
                <form>
                    <label>Presentation Title:</label>
                    <input type="text" name="presentationTitle" />
                    <input type="submit" value="Submit" />;
                </form>
            </div>
        );
    }
}

export default PresentationAttributesForm;