模态框如何优化大量重复代码？

Question

如题，在一个页面里经常会使用好多个自定义内容的模态框，因此也定义了大量控制模态框的state和方法：

const [showModal, setShowModal] = useState(false)
const hideModal = () => setShowModal(false)


<Modal visible={showModal} onClose={hideModal}>
  ......
</Modal>

如此代码随着模态框数量增加，大量重复出现。

理论上可以使用API调用的方式代替，但是自由度不足（一些默认样式和我们UI不一样）

像这样的代码要如何优化比较好呢？

Answer 1

const Dialog = ({open = false}) => {
            return (
                <dialog open={open} mode>
                    <p>11</p>
                </dialog>
            );
        }

        const useDialog = (isOpen) => {
            const [open, setOpen] = useState(isOpen);
            const dialogInstance = useMemo(() => <Dialog open={open}/>, [open]);
            const container = useRef(null);
            useEffect(() => {
                container.current = document.createElement('div');
                document.body.appendChild(container.current);
            }, [])
            useEffect(() => {
                if (container.current) {
                    ReactDOM.render(dialogInstance,container.current);
                }
            }, [dialogInstance]);
            const showDialog = useCallback(() => {
                setOpen(true);
            }, []);
            const hideDialog = useCallback(() => {
                setOpen(false);
            }, []);
            return [showDialog, hideDialog];
        }

        const App = props => {
            const [showDialog, hideDialog] = useDialog(true);
            return(
                <div>
                    <div onClick={showDialog}>open</div>
                    <div onClick={hideDialog}>close</div>
                </div>
            )
        }
        ReactDOM.render(<App />, document.querySelector('#container'));

写个hooks 类似这样？

Answer 2

避免过度封装，对于无法或没必要封装的内容，重复不一定是坏事，便于后续维护和拓展。如果想提高效率可编写模板代码。