Javascript 使用TypeScript动态加载React组件

我正在为我的web应用程序使用laravel，并且作为laravel提供默认设置本身的反应

我已经在react中安装了typescripts。现在，我试图在html页面需要时动态加载所有组件

我创建了一个修复类来加载组件，并将组件名称作为数据组件传递。这是完美的工作，只有反应，但之后，当我添加在这个类型脚本它不工作

它显示了这个错误-

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; }>'.

并创建了一个文件

LoadComponents.tsx

，该文件将组件作为html文件加载，并保存组件名称-

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]);
    }
}

import*as React from“React”；
从“react dom”导入*作为react dom；
将*作为组件从“/AllComponents”导入
导出默认类LoadComponents扩展React.Component{
构造器（道具：任何）{
控制台日志（道具）；
控制台日志（组件）；
超级（道具）；
}
render（）{
const Component=组件[this.props.Component]；
返回组件&&；//*显示此行的错误*
}
}
if（document.querySelectorAll（'.load_content'））{
让holders=document.querySelectorAll（'.load_content'）；
for（设i=0；i<0.length；i++）{
出租项目：任何=持有人[i]；
//我是
ReactDOM.render（，holders[i]）；
}
}

如果不使用typescript，它的工作就完美了

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]);
    }
}