如何使用 redux + react 控制弹框组件

Question

使用 redux 的话，弹框应该怎么做比较合理，主要是以下需求：

• 弹框的基本样式多页面共用

• 每个弹框的内容复杂且都不相同，所以不需要弹框内容可定制，只要接收 children 就好。

我考虑了两种方法，但都有问题：

方法一：

// store
const initState = {
    IsShowDialog: false
    DialogName: null
}

//component
render() {
    const name = this.props.DialogName
    const pop1 = name == 'pop1' ? (<div>我是pop1</div>)：null
    <div>
        {pop1}
    </div>
}

//container
dispatch(...,{IsShowDialog:true, DialogName:'pop1'})

这样通过弹框名来判断弹框显示内容，但我觉着太繁琐。这样就需要我每个页面都引用 Dialog 组件，并给每个弹框都命名。

方法二：

// store
const initState = {
    IsShowDialog: false
    DialogContent: null
}

//component
render() {
    const pop1Content = (<div>我是pop1</div>)
    const pop = (<div>{this.props.DialogContent}</div>)
    <div>
        {pop}
    </div>
}

//container
dispatch(...,{IsShowDialog:true, DialogContent:pop1Content})

这样直接将弹框内容推送进 store，我比较倾向这种，只需要在顶级组件引用下 Dialog 组件，每次弹框只需将内容传进去。但是试下来有bug，弹框内容的_owenr属性会覆盖 store 里的其他无关数据，如下图：

箭头指向的属性会莫名奇妙的覆盖store里的其他无关的数据：

Answer 1

提供一个思路，用HoC高阶组件实现