Reactjs 从typescript+；中的其他文件（相同名称空间）导入类；反应

我有两个文件comment.tsx和commentlist.tsx

/// <reference path="./typings/react/react.d.ts" />
/// <reference path="./typings/react/react-dom.d.ts" />
/// <reference path="comment.tsx" />
/// <reference path="interfaces.d.ts" />

import * as React from "react";
import * as ReactDOM from "react-dom";
import Comment = W.T.F.Comment;

namespace W.T.F {
    export class CommentList extends React.Component<ICommentListData, {}>{
        public render() {
            var commentNodes = this.props.Data.map(function (comment: ICommentData) {
                return (
                    <Comment Author={comment.Author} Text={comment.Text}>{comment.Text}</Comment>
                );
            });
            return (
                <div className="commentList">
                    {commentNodes}
                </div>
            );
        }
    };
}

comment.tsx如下所示：

/// <reference path="./typings/react/react.d.ts" />
/// <reference path="./typings/react/react-dom.d.ts" />
/// <reference path="interfaces.d.ts" />

import * as React from "react";
import * as ReactDOM from "react-dom";

namespace W.T.F {
    export class Comment extends React.Component<ICommentData, {}>{
        constructor(props: ICommentData) {
            super(props);
        }

        public render() {
            return (
                <div className="comment">
                <h2 className="commentAuthor">{this.props.Author}</h2>
                <span>{this.props.Text}</span>
                    </div>
            );
        }
    }
}

//
/// 
/// 
从“React”导入*作为React；
从“react dom”导入*作为react dom；
命名空间W.T.F{
导出类注释扩展了React.Component{
构造函数（道具：ICommentData）{
超级（道具）；
}
公共渲染（）{
返回(
{this.props.Author}
{this.props.Text}
);
}
}
}

和commentlist.tsx

/// <reference path="./typings/react/react.d.ts" />
/// <reference path="./typings/react/react-dom.d.ts" />
/// <reference path="comment.tsx" />
/// <reference path="interfaces.d.ts" />

import * as React from "react";
import * as ReactDOM from "react-dom";
import Comment = W.T.F.Comment;

namespace W.T.F {
    export class CommentList extends React.Component<ICommentListData, {}>{
        public render() {
            var commentNodes = this.props.Data.map(function (comment: ICommentData) {
                return (
                    <Comment Author={comment.Author} Text={comment.Text}>{comment.Text}</Comment>
                );
            });
            return (
                <div className="commentList">
                    {commentNodes}
                </div>
            );
        }
    };
}

//
/// 
/// 
/// 
从“React”导入*作为React；
从“react dom”导入*作为react dom；
导入注释=W.T.F.注释；
命名空间W.T.F{
导出类CommentList扩展React.Component{
公共渲染（）{
var commentNodes=this.props.Data.map（函数（注释：ICommentData）{
返回(
{comment.Text}
);
});
返回(
{commentNodes}
);
}
};
}

编译这些文件会导致错误

commentlist.tsx（8,24）TS2305模块“W.T.F”没有导出成员“Comment”

我的消息来源出了什么问题

---

从其他文件导入其他react类（包含在名称空间中）的最佳方法是什么？

TypeScript将文件视为外部模块（如果存在顶级导入），并且示例中的名称空间将成为模块的一部分

大多数项目都希望使用不带名称空间的外部模块，但要以您尝试的方式使用名称空间，请使用以下较旧的引用/导入语法，并在名称空间内定义导入：

/// <reference path="./typings/react/react.d.ts" />
namespace W.T.F {
    import React = __React;

    export class Comment extends React.Component<ICommentData, {}>{
        constructor(props: ICommentData) {
            super(props);
        }

        public render() {
            return (
                <div className="comment">
                <h2 className="commentAuthor">{this.props.Author}</h2>
                <span>{this.props.Text}</span>
                    </div>
            );
        }
    }
}

//
命名空间W.T.F{
导入反应=uu反应；
导出类注释扩展了React.Component{
构造函数（道具：ICommentData）{
超级（道具）；
}
公共渲染（）{
返回(
{this.props.Author}
{this.props.Text}
);
}
}
}

如果存在任何顶级导入，则TypeScript将文件视为外部模块，并且示例中的命名空间将成为模块的一部分

大多数项目都希望使用不带名称空间的外部模块，但要以您尝试的方式使用名称空间，请使用以下较旧的引用/导入语法，并在名称空间内定义导入：

/// <reference path="./typings/react/react.d.ts" />
namespace W.T.F {
    import React = __React;

    export class Comment extends React.Component<ICommentData, {}>{
        constructor(props: ICommentData) {
            super(props);
        }

        public render() {
            return (
                <div className="comment">
                <h2 className="commentAuthor">{this.props.Author}</h2>
                <span>{this.props.Text}</span>
                    </div>
            );
        }
    }
}

//
命名空间W.T.F{
导入反应=uu反应；
导出类注释扩展了React.Component{
构造函数（道具：ICommentData）{
超级（道具）；
}
公共渲染（）{
返回(
{this.props.Author}
{this.props.Text}
);
}
}
}

您的两个文件现在都是“外部模块”。将导入语句移动到

命名空间W.T.F

中。您可能还需要将其更改为

声明命名空间…

。签出陷阱。如果您想让名称空间工作，您必须将它们导出为afaik.hm。。我知道我必须删除外部模块中的名称空间，但是.tsx文件作为外部模块处理而.ts文件不作为外部模块处理的原因是什么？您的两个文件现在都是“外部模块”。将导入语句移动到

命名空间W.T.F

中。您可能还需要将其更改为

声明命名空间…

。签出陷阱。如果您想让名称空间工作，您必须将它们导出为afaik.hm。。我知道我必须删除外部模块中的名称空间，但是.tsx文件作为外部模块处理而.ts文件不作为外部模块处理的原因是什么？谢谢。编辑它以匹配您的反馈谢谢您的回答。我删除了当前项目中的名称空间。下次我会尝试你的解决方案来验证它。谢谢。编辑它以匹配您的反馈谢谢您的回答。我删除了当前项目中的名称空间。下次我将尝试您的解决方案以验证它。