ReactJS TypeScript:尝试导入错误：'ActionButtonProps‘不是从'./ActionButton’中导出的

问题分析

你遇到的错误信息表明在尝试从./ActionButton模块导入ActionButtonProps时失败了。这通常是由于以下几个原因之一：

模块路径错误：./ActionButton文件路径不正确。
导出错误：./ActionButton文件中没有正确导出ActionButtonProps。
类型定义错误：./ActionButton文件中定义的ActionButtonProps类型有误。

解决方法

1. 检查模块路径

确保./ActionButton文件的路径是正确的。假设你的文件结构如下：

src/
  components/
    ActionButton/
      ActionButton.tsx
      ActionButtonProps.ts

那么你应该这样导入：

import { ActionButtonProps } from './ActionButton/ActionButtonProps';

2. 检查导出

确保./ActionButtonProps.ts文件中正确导出了ActionButtonProps类型。例如：

// ./ActionButton/ActionButtonProps.ts
export interface ActionButtonProps {
  label: string;
  onClick: () => void;
}

然后在ActionButton.tsx中导出这个类型：

// ./ActionButton/ActionButton.tsx
import { ActionButtonProps } from './ActionButtonProps';

export const ActionButton: React.FC<ActionButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>{label}</button>
  );
};

3. 检查类型定义

确保ActionButtonProps类型的定义是正确的。例如：

// ./ActionButton/ActionButtonProps.ts
export interface ActionButtonProps {
  label: string;
  onClick: () => void;
}

示例代码

假设你的文件结构如下：

src/
  components/
    ActionButton/
      ActionButton.tsx
      ActionButtonProps.ts

ActionButtonProps.ts

// ./ActionButton/ActionButtonProps.ts
export interface ActionButtonProps {
  label: string;
  onClick: () => void;
}

ActionButton.tsx

// ./ActionButton/ActionButton.tsx
import { ActionButtonProps } from './ActionButtonProps';

export const ActionButton: React.FC<ActionButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>{label}</button>
  );
};

使用示例

// src/App.tsx
import React from 'react';
import { ActionButton } from './components/ActionButton/ActionButton';

const App: React.FC = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <ActionButton label="Click me" onClick={handleClick} />
    </div>
  );
};

export default App;