Javascript 如何渲染具有不同组件名称的多个组件？

我有几个组件，它们具有相同的参数和迭代值，如下所示：

import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";

export default function App() {
  return (
    <div className="App">
      <Panel id={1} />
      <Navbar id={2} />
    </div>
  );
}

export default function App() {
  const compnentArray = ['Panel', 'Navbar'];
  const RenderComponents = () => {
    let _o = [];
    return (
      componentArray.map((item, index) => _o.push(<{item} id={index} />))
    )
  }
  return (
    <div className="App">
      {RenderComponents()}
    </div>
  );
}

---

因此，

项

呈现组件名称。这可能吗？

当然，您可以使用

Array.map（）

的第二个参数，该参数为您提供数组中的索引：

import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";

const components = [Panel, Navbar];

export default function App() {
  return (
    <div className="App">
      {components.map((Component, i) => (
        <Component key={i} id={i + 1} />
      ))}
    </div>
  );
}

从“React”导入React；
从“/Panel”导入面板；
从“/Navbar”导入导航栏；
常量组件=[面板，导航栏]；
导出默认函数App（）{
返回(
{components.map（（Component，i）=>(
))}
);
}

如中所述，要动态呈现组件，只需确保将其分配给首字母大写的变量，并像使用任何其他组件一样使用它。

从“React”导入React；
从“/Panel”导入面板；
从“/Navbar”导入导航栏；
常量组件=[面板，导航栏]；//请注意，您将组件用作项，而不是字符串；
/*
如果组件需要来自父级的道具，
应该声明'renderComponents（）'函数
在父组件内部（可能带有`useCallback（））`
钩子，以避免在重新渲染时不必要的重新声明）
*/
函数renderComponents（）{
返回components.map（（comp，index）=>）| | null；
}
导出默认函数App（）{
返回(
{renderComponents（）}
);
}

您可以将字符串与实际的组件引用交换，并在JSX部件中直接对其进行重新测试，如下所示：

导出默认函数App（）{
常量组件数组=[面板，导航栏]；
返回(
{componentsArray.map（（组件，索引）=>）}
);
}

---

尽管我建议，一旦你对React足够熟悉，开始使用Memonization，就将它们记录下来以提高性能。

这对你有用吗，或者你发现了什么问题吗？您是否查看了每个映射组件的

键

属性？非常震惊地看到，

被React识别，并且

组件

在本例中仅等于面板和导航栏。

export default function App() {
  const compnentArray = ['Panel', 'Navbar'];
  const RenderComponents = () => {
    let _o = [];
    return (
      componentArray.map((item, index) => _o.push(<{item} id={index} />))
    )
  }
  return (
    <div className="App">
      {RenderComponents()}
    </div>
  );
}

import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";

const components = [Panel, Navbar];

export default function App() {
  return (
    <div className="App">
      {components.map((Component, i) => (
        <Component key={i} id={i + 1} />
      ))}
    </div>
  );
}