时间戳

首页 > 解决方案 > 使用 React.js 和 Typescript 时模块没有导出成员问题

reactjs - 使用 React.js 和 Typescript 时模块没有导出成员问题

问题描述

我正在尝试将所有组件组合到一个文件中，并在所有位置中使用该文件。但是当我尝试从文件中导入组件时，它说Module has no exported member

以下是我的代码

UserActionButton.tsx：

import * as React from 'react';
class UserActionButton extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
    }
    render() {
        return <div>BUTTON HERE</div>;
    }
}
export default UserActionButton;

AppComponents.tsx：

import UserActionButton from './buttons/UserActionButton';
export default {
    UserActionButton
};

主页.tsx：

import * as React from 'react';
import {
    UserActionButton
} from '../../components/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;

文件中报告了错误Home.tsx，请指导我如何解决此问题。

标签： reactjstypescript

解决方案

UserActionButton如果您打算使用 export default ，那么您可以删除 in 的 import中的花括号Home.tsx。AppComponents.tsx但是，正在导出一个对象，因此您应该在使用 jsx 之前将import AppComponents from '...AppComponents'其拉出UserActionButton到本地：constconst UserActionButton = AppComponents.UserActionButton;

推荐阅读