命名空间反应没有导出成员 FC - Javascript

问题描述

当使用 TypeScript 或者 ES6 模块语法导出和导入时，有时会遇到以下错误：

Property 'FC' does not exist on type 'namespace'

这是因为当前模块中的命名空间没有导出 FC 成员。

解决方案

1. 检查命名空间是否正确导出

要让模块中的命名空间正确导出 FC 成员，需要在命名空间中定义一个接口，并将接口导出：

namespace MyNamespace {
  export interface MyComponentProps {
    name: string;
  }
  export const MyComponent: React.FC<MyComponentProps> = (props) => {
    return <div>{props.name}</div>;
  };
}

这样，外部模块就可以通过导入 MyNamespace 中的 MyComponent 来使用了。

2. 使用 ES6 模块语法

在 TypeScript 或者 ES6 中，可以使用 ES6 导入导出语法，以免出现命名空间导出成员出现错误的情况。

export interface MyComponentProps {
  name: string;
}
export const MyComponent: React.FC<MyComponentProps> = (props) => {
  return <div>{props.name}</div>;
};

使用时，可以直接导入组件：

import { MyComponent, MyComponentProps } from './MyComponent';

结论

在 TypeScript 或者 ES6 中，使用 ES6 导入导出语法可以避免出现命名空间导出成员错误的问题，同时可以更加清晰地管理代码。在已有代码中，要让命名空间正确导出成员，需要定义一个接口并将其导出。