具有故事书动态元素的原子设计

Question

我正在从事一个使用 Atomic Design 和 Storybook 的项目。我对如何将原子添加到分子有点困惑。即，如果我有一个带有 header body 和页脚区域的基本模态，我将如何向它们动态添加原子。

所以第一个想要使用模式并且在 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

我通过 props.children 渲染和链接内部组件并根据需要渲染子组件来解决这个问题。

具有故事书动态元素的原子设计

Atomic Design with Storybook Dynamic elements

dynamic

reactjs

atomic-design

storybook