-1

我有一个文件（在本例中为 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>
  );
}
4

2 回答 2

0

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

function App(prop) {
  const [Comp, setComp] = useState(null);
于 2021-09-23T06:26:54.640 回答
0

如果您想在单个文件中使用许多函数/组件并且必须动态调用该函数，请尝试以下代码。

添加getData()函数以调用Test.js文件中的函数。

测试.js

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

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

export function getData(fnName) {
  switch (fnName) {
  case "Test":
    return Test();
  default:
    return SuperTest();
  }
}

调用getData()函数并将您的道具作为参数传递

应用程序.js

import("./Test").then((fn) => {
  let newComp = fn.getData({prop}));
  // use above newComp value
});
于 2021-09-23T05:52:16.057 回答