迭代导入的反应组件答案

【问题标题】：iterate over imported react components迭代导入的反应组件
【发布时间】：2022-06-14 06:24:05
【问题描述】：

我们如何迭代导入的 react 组件列表？ :(
我试图这样做，但不起作用

import * as Stories from "./test.stories";

const stories = Object.keys(Stories);
<div>
  {stories.map(s => {
    const S = Stories[s];
     return <S />
    })}
</div>

当我这样做时，Jest 会告诉我： “元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。” 我正在使用 jest，因为我正在尝试这样做进行测试。（尝试为从 stroybook 文件导入的每个故事手动创建一个测试）

【问题讨论】：

你是如何从test.stories导出的？
在这个文件（test.strories.tsx）中，有很多这样的：export const A = ... // export const B = ... // export const C = ...
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： reactjs import jestjs

【解决方案1】：

您遇到的问题是因为 Stories 的“默认”导出是一个对象，它包含在您的 import * as Stories 的 Stories 中。无法渲染对象。而您要导入的故事是函数，可以使用 <S /> 进行渲染。

所以一个快速的解决方案是过滤掉“默认”

const stories = Object.keys(Stories).filter( key => key !== 'default' );

话虽如此，我不知道这是否是您实际想要做的正确解决方案。只是它应该“工作”。

【讨论】：