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

Posted 2023-02-19

【中文标题】带有故事书动态元素的原子设计

【英文标题】：Atomic Design with Storybook Dynamic elements

【发布时间】：2021-11-20 15:08:50

【问题描述】：

我正在开展一个使用 Atomic Design 和 Storybook 的项目。 我对如何将原子添加到分子中有些困惑。即，如果我有一个带有页眉主体和页脚区域的基本 Modal，我将如何动态地向它们添加原子。

所以第一个想要使用模态并在标题中有 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 />

我在网上四处查看，但找不到任何关于这样做的内容。

非常感谢任何帮助！

【参考方案1】：

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