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>