javascript - 在 React JS 中构建引导模式和通知的正确方法？

Question

我想在我的应用程序中使用模态和通知，并且使用旧的 jQuery Bootstrap，创建模态和通知真的很容易，但现在我很困惑如何使用 react 组件系统在虚拟 DOM 中实现它。

这是我认为在 React 组件中构建模态的标准 React 方式:

Index/Router Component >
    Main Layout Component >
        {...Page Components... }
            {...Child Component}
                {<Modal /> or <Notification />}

问题是我不想经常导入和创建 <Modal>或 <Notification />我的子组件中的组件，而不是调用一个实用函数，例如 {app.notify({type: 'success', message: 'some message'})}或 app.modal({...customconfig})并且都在我的 Main layout component 中定义通过任何子组件触发。

任何帮助都将非常有用，谢谢!

Answer 1

您不需要将 Modal 组件保持在层次结构中。您的 Modal 组件应该是一个独立的组件，它将采用适当的 props 来决定需要显示的内容。例如

<Modal message={"This is my modal"} showOkCancel={true} showYesNo={false} handleOkYes={()=>console.log("OK clicked")} handleCancelNo={()=>console.log("Cancel clicked"} />

在上面的示例中，Modal 接受了一些属性，这些属性将帮助它决定要显示的消息、要显示的按钮以及点击按钮时需要采取的操作。

这种组件可以位于组件层次结构之外，并且可以导入到任何需要显示模态的组件中。父组件只需要传递适当的 Prop 来显示模式。

希望这对您有所帮助。