我该如何以干燥的方式写这个。

Question

如何以DRYer方式编写这些代码。我仍然在努力改进编写代码。我最感兴趣的是重构Modals部分。你也知道React元素是否有类型。我正在使用react和打字稿。

import * as React from 'react';
import {
    Button,
    Modal
} from 'library';
import { AddEndpoint } from './AddEndpoint';
import { Purge } from './Purge';

interface ListViewState {
    isAddEndpointModalOpen: boolean;
    isPurgeModalOpen: boolean;
};

export class ListView extends React.Component<{}, ListViewState> {
    constructor(props: any) {
        super(props);

        this.state = {
            isAddEndpointModalOpen: false,
            isPurgeModalOpen: false
        };
    }

    render() {
        return(
            <div className="oui-container">
                <Button onClick={() => this.setState({ isAddEndpointModalOpen: true})}/>
                <Button onClick={() => this.setState({ isPurgeModalOpen: true})}/>
                <Modal
                    isOpen={this.state.isAddEndpointModalOpen}
                    title="Create a new CDN endpoint"
                    closeHandler={() => this.setState({ isAddEndpointModalOpen: false })}
                    helpLink="https://oracle.com"
                >
                    <AddEndpoint/>
                </Modal>
                <Modal
                    isOpen={this.state.isPurgeModalOpen}
                    title="Purge Cache"
                    closeHandler={() => this.setState({ isPurgeModalOpen: false })}
                    helpLink="https://oracle.com"
                >
                    <Purge/>
                </Modal>
            </div>
        );
    }
};

export default ListView;