ReactJS中模態的可重用性

Question

進行動態模態運算，無需過多重復代碼。 我該怎么辦？

我使用了渲染道具來將狀態與布局分開。

interface State {
    open: boolean;
}

interface InjectedModalProps {
    onCloseModal: () => void;
    onOpenModal: () => void;
    open: boolean;
}

interface ModalProps {
    children(props: InjectedModalProps): ReactNode;
}
class ModalProvider extends Component<ModalProps, State> {
    state: State = {
        open: false
    };
    onOpenModal = () => {
        this.setState({ open: true });
    };

    onCloseModal = () => {
        this.setState({ open: false });
    };

    render() {
        const { open } = this.state;
        const { children } = this.props;
        return (
            <Fragment>
                {children({
                    onCloseModal: this.onCloseModal,
                    onOpenModal: this.onOpenModal,
                    open
                })}
            </Fragment>
        );
    }
}

const BathroomModal: FunctionComponent<Props> = ({ edit }) => (
    <ModalProvider>
        {({ onCloseModal, open, onOpenModal }) => {
            return (
                <Fragment>
                    <Modal open={open} center onClose={onCloseModal}>
                        <Container>
                            <h1>Badkamer toevoegen</h1>
                            {edit && <DeleteButton>Verwijderen</DeleteButton>}
                            <Divider />
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dolores incidunt ipsa,
                                earum nobis beatae facilis, dolore harum vitae nihil molestias repudiandae non quisquam
                                ab. Omnis unde atque voluptate ipsa!
                            </p>
                            <ContentBlock>
                                <h4>Type</h4>
                                <BathroomInputTypes />
                                <h4>Toilet</h4>
                                <Field name="toilet" options={[0, 1, 2, 3, 4, 5]} component={InputWithToggle} />
                                <h4>Douche</h4>
                                <Field name="shower" options={[0, 1, 2, 3, 4, 5]} component={InputWithToggle} />
                                <h4>Bad</h4>
                                <Field name="bath" options={[0, 1, 2, 3, 4, 5]} component={InputWithToggle} />
                            </ContentBlock>
                            <Divider />
                            <PrimaryButton onClick={onCloseModal} type="button">
                                {!edit ? 'Badkamer toevoegen' : 'Wijzigingen opslaan'}
                            </PrimaryButton>
                        </Container>
                    </Modal>
                    <SecondaryButton onClick={onOpenModal} type="button">
                        Badkamer toevoegen
                    </SecondaryButton>
                </Fragment>
            );
        }}
    </ModalProvider>
);

這就是我想出的。 但是我認為通過將Modal組件提取到ModalProvider中可以更加重用。 我也可以在其中放置觸發按鈕。 但是，我也希望觸發按鈕是動態的，因此例如可以使用圖標代替按鈕來打開模式。

Answer 1

我認為這是一個好的開始。 我建議您考慮一下模式通常具有的所有東西（在相同的地方），並將它們放入ModalProvider中。 如您所建議的，如果您需要帶有動作按鈕的Dialog樣式模態，我將添加關閉按鈕以及條件“確定”按鈕或右下角的類似內容。

這些按鈕的文本可以通過props進行更改，但是它們應該始終是按鈕。 即使它是一個圖標，也可能應該在按鈕組件中以維護語義HTML。 您可以將關閉按鈕值作為道具傳遞給模式提供程序，如下所示：

<ModalProvider buttonText={<Icon type='close' {...props} />}>
  {... modal contents ...}
</ModalProvider>