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

【问题标题】：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} />

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

非常感谢任何帮助！

【问题讨论】：

标签： reactjs dynamic storybook atomic-design

【解决方案1】：

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

【讨论】：