reactjs - TypeScript: تصدير مكونات React كجزء من مساحة اسم

لدي الملفات التالية:

AutosuggestComponent.tsx:

import * as React from 'react';

interface AutosuggestProps {
    ...
}    

interface AutosuggestState {
   ...
}

export default class Autosuggest extends React.Component<AutosuggestProps, AutosuggestState> {
    ...
}

وأود أن أستورد مكون الاقتراح التلقائي بهذه الطريقة في ConsumerComponent.tsx:

import Autosuggest = Components.AutoSuggest;

كيف يمكنني تصدير AutosuggestComponent.tsx من أجل جعل هذا يعمل؟

لقد حاولت إنشاء ملف Autosuggest.ts على هذا النحو:

import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = AutosuggestComponent;
}

الذي لا يعمل. بعد ذلك لا يمكن لمكون المستهلك العثور على مساحة الأسماء 'Components'. ومع ذلك، هذا يعمل:

// import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = { dummyValue: "test" }
}

حالما أقوم بتعليق الاستيراد، يكون بمقدور مكون المستهلك العثور على المساحة الاسمية. لماذا؟

هل هناك أي طريقة لحل هذا؟

الإجابة رقم 1

يمكنك الوصول إلى السلوك المرغوب عن طريق هيكلة كودك بالطريقة التالية:

أضف ملف ts إضافي باسم index.ts في المجلد الذي توجد فيه جميع مكوناتك:

export * from './Autosuggest';
export * from './Combobox';

ثم قم باستهلاكه من ملف ConsumerComponent.tsx الخاص بك:

import * as Components from './components/index';
import Autosuggest = Components.AutoSuggest;

السبب في عدم عمله مع import هو حقيقة أنه عند استخدام import تقوم بتحويله إلى وحدة (حتى لو كنت تستخدم كلمة namespace) حيث أن 'Components' غير مُصدرة. وأود أن أوصي بعدم استخدام المساحات المسمّاة على الإطلاق، انظر هنا، وهنا

الإجابة رقم 2

index.ts

import { A } from './A.tsx';
import { B } from './B.tsx';

export const C = {
  A,
  B,
}

باستخدام :

import { C } from './index';

<C.A/>
<C.B/>

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "noEmit": true
  }
}

نسخة تايب سكريبت 3.8.3