0

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

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

我在网上环顾四周，但找不到任何关于这样做的东西。

一如既往，非常感谢任何帮助！

4

1 回答 1

0

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

于 2021-09-28T15:37:02.863 回答