React与TypeScript中模块无导出成员问题及解决咨询

这个问题的核心是你在组件汇总文件的导出方式和导入方式不匹配，我给你两种简单的解决办法：

方案一：改用命名导出（推荐） #

你当前在AppComponents.tsx里把组件包装成一个对象做了默认导出，但Home.tsx里用的是命名导入语法，这就导致TS找不到对应的导出成员。修改AppComponents.tsx，把默认导出改成命名导出：

import UserActionButton from './buttons/UserActionButton';
// 去掉默认导出的对象，改用命名导出
export { UserActionButton };

这样Home.tsx里原来的导入代码import { UserActionButton } from '../../components/AppComponents';就可以正常工作了。如果以后要添加更多组件，直接扩展导出列表就行：

import UserActionButton from './buttons/UserActionButton';
import DeleteButton from './buttons/DeleteButton';
export { UserActionButton, DeleteButton };

方案二：保留默认导出，修改导入方式 #

如果你想继续用对象打包的方式导出，那就要调整Home.tsx的导入逻辑，先默认导入整个组件对象，再从中取出需要的组件：

import * as React from 'react';
// 默认导入整个组件集合对象
import AppComponents from '../../components/AppComponents';

class HomePage extends React.Component<any, any> {
  render() {
    return <div>
      <h1>Hi, I’m a Home page component!</h1>
      {/* 通过对象访问对应的组件 */}
      <AppComponents.UserActionButton></AppComponents.UserActionButton>
    </div>;
  }
}
export default HomePage;

或者你也可以在导入时直接解构：

import * as React from 'react';
import AppComponents from '../../components/AppComponents';
// 解构出需要的组件
const { UserActionButton } = AppComponents;

class HomePage extends React.Component<any, any> {
  render() {
    return <div>
      <h1>Hi, I’m a Home page component!</h1>
      <UserActionButton></UserActionButton>
    </div>;
  }
}
export default HomePage;

简单总结一下：命名导出+命名导入是TypeScript项目里更规范的做法，代码可读性和维护性更好，更推荐第一种方案。

内容的提问来源于stack exchange，提问作者billcyz