React项目中的弹窗管理

Question

老师好，请问在React中有什么比较好弹窗管理方案吗？

目前遇到的痛点是，在项目很多各种各样且不可复用的弹窗，如果要使用的话，必须将弹窗放到根组件的模板中，比如：

function App() {
  return (
	<>
	  {/* other code... */}
	  <Dialog1 />
	  <Dialog2 />
	  <Dialog3 />
	  {/* 还有其他的弹窗、弹出层、Toast等 */}
	</>
  )
}

我比较想用api的形式调用弹窗，就像在Vue项目中，我可以直接封装好组件，然后直接在业务代码中以函数调用的形式Dialog({ message: '提示' })来使用弹窗，而不必先将弹窗写到模板中。

Answer 1

summerstarry 2022-04-11 11:28:40

emmm像后台管理系统，不是每个页面都有编辑等弹框吗？为啥要放在全局

• Nolan #1

  具体业务使用的比如编辑弹窗，不用放在根组件；这个同学问的是Dialog这种各个组件都会用到的，放在根组件比较好

Answer 2

Nolan 2022-03-14 12:38:27

一个比较简单的方法是，把弹窗放在根组件，把控制它是否显示的变量放在全局状态管理里(比如redux)，然后用一个hook来控制，比如：

const useModal = () => {
  const dispatch = useDispatch()
  const show = useCallback((message: string) => {
    dispatch(setMesseage(message));
    dispatch(setShow(true));
  }, [])
  return {show}
}

• 提问者 PARADISELIN #1

  好的，那看来还是少不了需要把所有的弹窗放到根组件中呀