Atomic Design with Storybook Dynamic elements

Question

我正在做一个使用Atomic Design和Storybook的项目。我对如何向分子中加入原子有点困惑。例如，如果我有一个基本的模态与页眉，正文和页脚区域，我如何动态地添加原子到他们。

所以第一个想要使用模态，并且在header中有3个按钮，然后下一个只想要一个标题。

将有(n)种不同的情态用法。

我的组件是这样的-

export default function ModalMolecule({  test, ...props }) {
return (
<>
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
<div className="relative w-auto my-6 mx-auto max-w-3xl">
{/*content*/}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/*header*/}
{test}
<div className="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t"></div>
{/*body*/}
<div className="relative p-6 flex-auto"></div>
{/*footer*/}
<div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b"></div>
</div>
</div>
</div>
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
</>
);
}

我的故事是这样的-

export default {
title: "Molecules/Modal",
component: ModalMolecule,
};
const Template = (args) => <ModalMolecule {...args} />;
export const Basic = Template.bind({});
Basic.args = {
label: "Basic",
size: "md",
onClick: () => {},
test:{<div>Dynamicly pass Components from here</div>}

};

那么当我使用Modal时，我可以像这样动态地传递元素-

const dynamicElement=()=>{
return <><buttonAtom/></>
}

<ModalMolecule test={dynamicElement} />

我在网上找了一下，但是找不到任何关于这样做的东西。

如往常一样，任何帮助都是非常感谢的!

Answer 1

我通过使用道具解决了这个问题。子元素渲染和链接内部的组件，并根据需要渲染子元素。