时间戳

首页 > 解决方案 > 如何基于prop在文件中动态导入react组件

javascript - 如何基于prop在文件中动态导入react组件

问题描述

我有一个文件（在本例中为 Test.js），将来会有许多小组件（目前只有 Test 和 SuperTest）。

我不想导入整个文件以优化性能。我尝试只导入我需要的组件。不是整个文件。

在示例中，prop 可以是“Test”或“SuperTest”。它抛出一个错误Unexpected token (7:26) 有什么办法可以做到这一点吗？然后将其渲染到 App 中？

应用程序.js

import { useState } from 'react';
// import Test from './Test';

function App({prop}) {
  const [Comp, setComp] = useState(null);

  import('./Test').then(({`${prop}`: newComp}) => { // This is an ERROR
    console.log(typeof newComp); // Object
    setIcon(() => newComp);
  });

  return (
    <div className="App">
      <Comp />
    </div>
  );
}

export default App;

测试.js

export const Test = () => {
  return (
    <div>
      Hello People
    </div>
  );
}

export const SuperTest = () => {
  return (
    <div>
      Hello People 2
    </div>
  );
}

标签： javascriptreactjsreact-hooks

解决方案

不要在这个 {props} 中包装道具。试试这个：

function App(prop) {
  const [Comp, setComp] = useState(null);

推荐阅读