使Modal组件独立于父状态？

Question

我的反应项目使用redux，但为了触发＆＃34;确认删除＆＃34;父母中的模态我使用父状态来触发模态。

我可以将模态链接到redux存储区，但这两种方法都感觉像是非常复杂的删除操作方式。

理想情况下，我希望独立于state / redux设置模式，这样我就可以在确认删除之前在runModal(body, clear, callback) onClick处理程序中触发button函数。

我错过了什么？

// Parent Component
import React, {Component} from 'react';
import { connect } from 'react-redux';
import * as actions from './actions.js';

import MyModal from '../../modal';

class EditUser extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            modal: {
                body:null,
                callback:null,
                clear: null,
            }
        }
    }


    clearModal = () => { this.setState({modal: false}) }


    handleUserDelete = (id, index) => {
        let body = "Permanently delete user?";
        this.setState({
            modal: {
                body,
                callback:()=> { this.props.deleteUser(id, index) },
                clear: this.clearModal,
            }
        })
    }


    render() {
        const { updateUser,  user } = this.props;
        return(
            <MyModal
                {...this.state.modal}
                />
            <button 
                className="btn-sm btn-outline-secondary"
                onClick={() => this.handleUserDelete(user.ID, user.index)}
                >Remove</button>
            </div>
        )
    }
}


function mapStateToProps ({ account }) {
    const { user } = account;
    return { user };
}
export default connect(mapStateToProps,actions)(EditUser);

-

// Child Component
import React, {Component} from 'react';
import { Modal } from 'react-bootstrap';


class MyModal extends Component {
    render (){
        const {
            title,
            body,
            callback,
            clear,
        } = this.props;
        if ( callback && body ) {
            return (
                <div className="w-100">
                    <Modal.Dialog>
                        {title &&                   
                        <Modal.Header>
                            <Modal.Title>{title}</Modal.Title>
                        </Modal.Header>
                        }
                        <Modal.Body>{body}</Modal.Body>
                        <Modal.Footer>
                            <button 
                                className="btn btn-sm btn-outline-secondary" 
                                onClick={()=> {clear()}}
                                >Close</button>
                            <button 
                                className="btn-sm btn-danger"
                                onClick={()=> {
                                    callback();
                                    clear();
                                }}
                                >Confirm</button>
                        </Modal.Footer>
                    </Modal.Dialog>
                </div>
            )
        }
        return null;
    }
}

export default MyModal