javascript - 使用 TypeScript 动态加载 React 组件

Question

我在我的 Web 应用程序中使用 laravel，并在 laravel 本身提供默认设置时做出反应。

我已经在反应中安装了打字稿。现在我试图通过 html 页面在需要时动态加载我的所有组件。

我创建了一个修复类来加载组件并将组件名称作为数据组件传递。它仅与 react 完美配合，但是当我在其中添加 TypeScript 后它不起作用。

它显示错误 -

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

加载所有组件的类是load_component. 刀片文件中的代码看起来像 -

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

我创建了一个导出所有组件的文件AllComponents.tsx

import * as React from "react";

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

export {
  Hello
}

并创建了一个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]);
    }
}

当不使用打字稿时，它非常有效。

标签： javascriptreactjslaraveltypescript