将DevExtreme Dialog/Popup改写为React MaterialUI等价组件问题排查

问题根因 #

你在封装的UniversalPopupComponent内部维护了独立的open状态，该状态仅在组件构造函数初始化时从props取值一次。后续父组件传入的open属性更新时，子组件内部的state不会同步更新，因此Dialog始终读取初始的false状态，无法正常触发显示。

最优解决方案（推荐：完全由父组件控制状态） #

MUI Dialog属于受控组件，推荐将显示状态完全交由父组件维护，子组件不存储独立状态，仅通过props接收状态和回调方法，避免多源状态不同步的问题，同时可以直接兼容原有旧组件的传参逻辑。

修改后的PopupMUI.js代码 #

import React from 'react';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';

class UniversalPopupComponent extends React.Component {
    // 触发取消回调，由父组件更新状态
    handleClose = () => {
        this.props.onCancel?.();
        this.props.onClose?.();
    }

    // 触发提交回调
    handleSubmit = () => {
        this.props.onSubmit?.(this.state.formData);
        this.handleClose();
    }

    render() {
        // 同时兼容open、visible两种传参方式，适配新旧调用逻辑
        const open = this.props.open ?? this.props.visible;
        return (
            <Dialog open={open} onClose={this.handleClose}>
                <DialogContent>
                    placeholder
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.handleClose}> 取消 </Button>
                    <Button onClick={this.handleSubmit}> 提交 </Button>
                </DialogActions>
            </Dialog>
        )
    }
}

export default UniversalPopupComponent;

修改后的App.js调用代码 #

class App extends React.Component {
    state = {
        popupVisibility: false,
    };

    handlePopupOpen = () => {
        this.setState({ popupVisibility: true })
    }

    handlePopupCancel = () => {
        this.setState({ popupVisibility: false })
    }

    handlePopupSubmit = (data) => {
        // 后续实现提交业务逻辑
        console.log('弹窗提交数据：', data)
        this.setState({ popupVisibility: false })
    }

    render() {
        return (
            <div>
                <Button onClick={this.handlePopupOpen}> 打开弹窗 </Button>
                {/* 完全兼容原有旧组件的传参方式，无需修改历史调用代码 */}
                <UniversalPopupComponent
                    popupDefinition={ownerDatabaseView}
                    popupValues={databaseRowData}
                    onSubmit={this.handlePopupSubmit}
                    onCancel={this.handlePopupCancel}
                    visible={this.state.popupVisibility}
                />
            </div>
        )
    }
}

备选方案（子组件维护状态） #

如果必须在子组件内部维护状态，可添加componentDidUpdate生命周期监听props的open/visible变化，同步更新子组件state：

class UniversalPopupComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: props.open ?? props.visible
        }
    }

    // 监听props变化同步更新内部state
    componentDidUpdate(prevProps) {
        const currentOpen = this.props.open ?? this.props.visible;
        const prevOpen = prevProps.open ?? prevProps.visible;
        if (currentOpen !== prevOpen) {
            this.setState({ open: currentOpen })
        }
    }

    handleClickClose = () => {
        this.setState({ open: false })
        this.props.onCancel?.();
    }

    render() {
        return (
            <Dialog open={this.state.open} onClose={this.handleClickClose}>
                <DialogContent>
                    placeholder
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.handleClickClose}> 关闭 </Button>
                    <Button onClick={this.handleClickClose}> 提交 </Button>
                </DialogActions>
            </Dialog>
        )
    }
}

注意：该方案存在多源状态同步风险，仅建议特殊场景使用，优先选择父组件受控方案。

内容的提问来源于stack exchange，提问作者Vlad SD