React项目中的弹窗管理

来源：10-2 状态提升，组合组件与控制反转(上)

PARADISELIN

2022-03-13

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

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

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

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

写回答

2回答

summerstarry

2022-04-11

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

Nolan

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

2022-04-12

共1条回复

Nolan

2022-03-14

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

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

PARADISELIN

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

2022-03-14

共1条回复

React17+Hook+TS4 优质实践，仿 Jira 企业级项目

解锁 React17 高阶用法，轻松应对大型复杂长周期项目

2691 学习 · 1236 问题

查看课程

相似问题

状态管理context+hooks和redux如何取舍？

回答 1

老师有考虑出个react+TS+antd+状态管理的后台管理系统，这类的课程吗？

回答 1

老师，我真实项目中使用我们的useAsync好呢还是使用react-query好呢

回答 1

react-query中的key如何管理

回答 1

请教老师关于React的使用场景

回答 1

打开慕课网App查看更多内容