javascript - Ladda React-komponent dynamiskt med TypeScript

Jag använder Laravel för min webbapplikation och React eftersom Laravel tillhandahåller standardinställning själv.

Jag har installerat TypeScript i React. Nu försöker jag ladda alla mina komponenter dynamiskt närhelst de behövs av HTML-sidan.

Jag har skapat en fix-klass för att ladda komponenten och skicka komponentnamnet som data-component. Det fungerade perfekt bara med React, men efter att jag lade till TypeScript i detta fungerar det inte.

Det visar fel detta -

ERROR in C:\xampp\htdocs\we-translate\resources\js\LoadComponents.tsx
./resources/js/LoadComponents.tsx
[tsl] ERROR in C:\xampp\htdocs\we-translate\resources\js\LoadComponents.tsx(14,23)
      TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'typeof import("C:/xampp/htdocs/we-translate/resources/js/AllComponents")'.

ERROR in C:\xampp\htdocs\we-translate\resources\js\LoadComponents.tsx
./resources/js/LoadComponents.tsx
[tsl] ERROR in C:\xampp\htdocs\we-translate\resources\js\LoadComponents.tsx(14,45)
      TS2339: Property 'component' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

Klassen som laddar alla komponenter är load_component. Koden i blade-filen ser ut så här-

<div class="load_content" data-component="Hello"></div>

Jag har skapat en fil som exporterar alla komponenter AllComponents.tsx

import * as React from "react";

import { Hello } from "./components/Hello";

export {
  Hello
}

och skapade en fil LoadComponents.tsx som laddar komponent som html-fil som håller komponentnamn -

import * as React from "react";
import * as ReactDOM from "react-dom";

import * as Components from './AllComponents'


export default class LoadComponents extends React.Component {
    constructor(props : any){
      console.log(props);
      console.log(Components);
        super(props);
    }
  render() {
    const Component = Components[this.props.component];
    return Component && <Component {...this.props} />; // *showing error at this line*

  }
}


if(document.querySelectorAll('.load_content')){
    let holders = document.querySelectorAll('.load_content');
    for(let i=0; i < holders.length; i++ ){
        let item: any = holders[i];
        // I am 
        ReactDOM.render(<LoadComponents {...(item.dataset)} />, holders[i]);
    }
}

Det fungerade perfekt när man inte använde TypeScript i det.