如何解决 React Bootstrap 模态框无法正确显示关闭动画的问题?-灵析社区

sssssjkl

我按照 ChatGPT 的描述,在 React Bootstrap 模态框的基础上以 hook 的形式封装了一个消息框组件,代码如下: import React from "react"; import { useState, createContext, useRef } from "react"; import { Button, Modal } from "react-bootstrap"; function useMessageBox() { let [title, setTitle] = useState(''); let [message, setMessage] = useState(''); let [buttons, setButtons] = useState(null); let [showDialog, setShowDialog] = useState(false); let resolveRef = useRef(null); const handleResult = (result) => { console.log(result); resolveRef.current(result); setShowDialog(false); }; const MessageBox = () => { return ( {title} {message} {buttons} ); }; const show = (title, message, type) => { setTitle(title); setMessage(message); if (type === 'ok') { setButtons( handleResult('ok') }>确定 ); } else if (type === 'yesno') { setButtons( handleResult('confirm') }>取消 handleResult('cancel') }>确定 ) } setShowDialog(true); return new Promise((resolve, reject) => { resolveRef.current = resolve; }); }; return [MessageBox, show]; } export default useMessageBox; 调用: function App() { const [MessageBox, show] = useMessageBox(); return ( 123 show("标题", "123", "yesno")}>显示 show("标题", "456", "ok")}>显示2 ); } 目前的问题是关闭对话框的时候没有动画,这个怎么解决? [CodeSandbox 链接](https://link.segmentfault.com/?enc=A9s8AEJotqXdh58GIZ3imA%3D%3D.a5Q7VsOJuT11QU3%2FtAXT46G5M4w40sGQJemiKy4Ky4k9C%2FY8QxHT82ZS77ji7F9PHfdprz1n5LvfQyx3vbuniE27TYRfCzwTtFNBldxo8hnmsaibGn1aCNsatTEHRAqlTEk48Zmtra1NX9dhtM1Ym%2BBB2kGI5NiHFPa55nQNDSzD%2FueIQKkBl8gsbGyxvldLVjeOve7MjywLvgxB98CbCZGqfOkmG2Y9qB7NcqoGRdCzEY1kApVa2MM71NawySnw6bUUxR%2ByjPbFsgcezwgV8Nx6DYVxI%2Fz9pGgL7w6na3RIYkSILvj6bhH1qasckfXmK4eNKAgsamZwm%2BguMWhGEFMW5NYWVRZnx1kE5kqM%2FSIKpCmmBx49QUjjiKe3yucpT8sN6RFnGok3JCRofqL%2B4T4OTm4XWZ85LsoWuKBoS8uNE%2Bzef3s7TNCcmhk3bZj43pafPFWvhsr6uimdLQW5zMerYtVKhB%2BcUQCH9JHQ4JZMxib7%2BndiBWCIG3dtA3KJ6nzJ3ovatU2i7MfiPsAg%2FQ8Wb2GV%2FhR0CtwipZ4k76hZ4Q2w4BdItUoX4lqmZB1ktHygu4UPpYnYCR1jWmgk3Jm4tmOnRKaOkM8aBxi7xUR2z2vXOYOtxDE9zL15ntuWLsWlhKdGIMhfxwla0XlT5Qx07tZQyyIJhvr%2FNuGVG0xiOc5U2qWS8Tjq6NqsN5dijY%2F%2BDZWu9x9hcTzoYIVYFQa%2Blbq3z8MbYX9%2BDTBkmhk30A85E151TnNwH8RZVDeLfT0hMWaohE7Dso4XG8sFA1bChabJmaXqF%2BhsTSis763AsNkaNsPUv3RVvQPGfT6zFQlEZQ5V4rNtfVrEGHiEzH8K3Zr4%2Bcd1zkLkjMdXmbonqbw1jbmLtvQh5J%2Fqte8367PLtGeMADA9IT%2FXnLimj%2Fc2PuP9tXqFPLHR0gIIqUubPdCfXa2GLk6sMTK8p64ZbwK%2BsqimiMd3DqgiArPRvP%2BBmHfUHwefmO3FHNwZVmQl2u5GhdUOB%2FTLml%2BaH1JROk8EdhMw0E7kKZOBui%2FqLiwHB%2BvKPJFusdccbIAT8JTTiR4HO06tFnZJ7p0oAx9h43MRl1EG769L90Fjl6kRPZ5uCpM%2FhYQjzyEu1CvZ8tKbLKLwXxCWc37vBtfoCA0trb%2B0jgv85vwtQhghjsTHBVFWgv0%2FXw%2FIBLle35ynqFB%2BS8CyP2J%2BP7NPJu6xpQkJ8X0xkDboBEzWrn0t5E%2B%2BOHLYge0fAcjDrjVJx7dQJTTcniv%2F8AWY7jhw6M01NPpOm9%2FzeK5xtTSRiUtJTCyCivXBZVEjV7AexPdnd5iJe55oIyUgVoOiyfa9iSRLo3UfgMPue4rfFehKBxA%2FLxSns0F4K9v%2FO8v2o%2BXk%2BzjpR5Dm0W6%2B9waEYz2zXzUrbxFybNsRgOIPdJs7LGj83YZyviTO%2Bun7kTpSY0GCmp3qvoyhgiwmiCxNRNkrC4anDultA4ZRny2WtgAhmzd8qa9pYatefx9JS834aDYO6ScGUjIAGIbd9J66PPN%2FArieyftOVtab%2F6BrMxZPKqluoKhLVrns6qBN7UTiSkwc2FQNCcY7zhkeL91T4OWSS6zYqrfq3Bo8QFjhnjG96CvvtQOxx7F%2BneZW9H3n83Efax3xNAF2mwifvodTTs0YtEFQ4%2Fy%2B4ah5wirwdf9t6GNHRlzeazFyGWbhkysBmrfuHqTAI0aYbRXd1k27mc53WOr8yZ7gMrUgKU6OHBFmB4zLX8TToQvSLhFscoznnWgXprcAMG6L0OZW6tXpt%2F0DpG81pgsD1B8hm95AsT3LMEMXuIbVuxn87NQmHWXvBk5QwO%2Fc4oq0bKJ149usejb8MuBd%2BbcrkhTnZ84RTsgtWoZLjsgeqm9BW2I3Oj6TQqvdxyBAphmnD0Fgj7ElSyFnyC78VFJ2jssC%2F0FyNHJvNG7gH%2BzGl0kHXCfHC6lLAFvihhDGw6t1rABCuE0W8bz295zRSs43MSa00mY7EcNfltGITkRRNqNXCWyjar%2BYPwLByQdMUXGKUMFVnWwDiZJKn9G6jLdDfnkn2ZYzfsdsf2J26CJ5V6YqcEEtKaO62Tf%2FWSUC9jlkjG5OGwm8nKoAJcYDm7TpUorFbivRpjEGadLnrvH73Sd8JyyefCOgA2QUJapgcrOD4np0cK5MgVHC5t3aGu2obtCirdXdHGmTp3n6YVQP2xY64VcCVtj23mAbM9RP8QzEzHfULuGhaTvNnNg0zcAMKR32U%2Byq9l8IsBs76D1NqaJ7HhU8jpOhJ0YotClWJQqZ6pLy20LG1pOcaexrn%2BSNMUjmD%2Ff2a2vZTAUR5ap%2BtoucqBi0%2FKNRjOWg2pqgXxJn20q%2BLfAPhPU51lPAoj2TqPnKfcXst%2B80%2Fylbfkz2Ky9D9Bs5jKwcYjw1TIZbhE2Bl5ajfqddhyOl4MYfVxqoz8HyBIt9hU1v1rs01RRnyAgrPekf2T6irkp%2Fi%2BVA432a6XgBDqPQwsfPMQjCq2XDaW05QH4NktUZoEfp7fI1OYyCVo1gg2qWvJq5En99rrDyQhfDw7gZmr0EbyWOPR4ogv4cAEksi1P9cuDShlzovHPFm4pE%2F2ww%2BLa%2B6aVwIASE5heoSi8yfVLr8PfQXYwnOwfkz3Se2K2r8tqJXoSbHJ6RhXMfgZfcdNUhf%2BWIqc3h4oXWvNey9NEqZ%2B0rUSbOCW8BnWUDuPa4JtVpvTf0TBR2eukkXVobMSLeJzhGnrKpOUazcKAmMoW4eNUmEwv0DvpKQMf2mV3AA0vHDnN50PJQY%2FervVryeXPPxA3DF8CotZ%2FX9AnvfYRNCHI%2FMmykY%2FCVBlJWHHnZrPTRy60rq%2BbMuYbkKfLFCaUPxKCPh9F2Oe70l%2BtaGusKzAkRksfi2Kky43I6z1EkqCdRkH2Edm0VTdBwE0z7OPGIegiCiKMF8ekvq2JhKQ1eMj6tHAknp%2BMUHqMs%2BSiSr11Aes0ol3kTOmATBv6qaKlqJgcmqivxtcnhSCLSCqhQ92Bzs8HuCWdVlNfhhKzJbx4pvdZXc2xuDb0UQVa%2BtPDJuGm26d9MEG7jyfk0yJoWX6cThNEo8LsBlot0xxlbmPyn3smRBBNqp88ylHUi7fKzy2t4mF%2B9vZ%2BKYx%2F3pa1uwrRETKlUBxD4LYpekdDzu7Xd7cv7WDQGC7K3JTAkYhzAl5qawIpvKG4%2BGrsFdDY9U0rEvbFlX5IKfXZj3hjKtZbo75gRYits7ewrY47JOhRd9k8LJ7Z1IDjeB929FYXTECfWTPV912HiN1OyjTaIrXewj6G0y%2FFOjeGGgrG2VCaomlb975HNjBMuwK212WPGCQeDb0QEULq%2FaAn1zhc%2B1uty2lJnR%2FrzU6QAtmjay6mKYrI9o34oUeL9aTTO5ZFNA9IRn6HFHCs2Rn4bk7ejvjxW3esUist5TZ1y6cXwkET7FTeFvfJJU8dW3GUAxkCJD06mAl%2Bo2SVCH6oFiWESFB9YGDpqUSr0ShVM5FZCv1nS8Wggwy3bF74f0L%2But860HaIzL7HPib4eANQlTWFoj7mPGOSgDPfBOPSyFhTzn1oakbohcyMpyn8nbjHI2mqGg04g2CLHpXK%2BIvPq6nNa0NRjP%2B4ayLxpIPztvyc2IQ6eDZMlyudoHebD3EbzSrqY8OZuL6N523E6k3JQ69pJ%2Fi3Im45Ymm93PGEZQAPBxpKc1NUD1apRdQgA3kon8XZmoD7WMfTrgY4SJN22cs0I230%2FOEqec25JS5DOGc5Rmb15FtogpplD7ZX6YZ8BFrw3IfmT4KvrLEXn2zdglYHUTtcc9iokrKUdbjeZ7t0IiLvxi%2FCsdpSKZRpf%2Br6NOTnKjphak0KLrqVLsEXx%2FxuyHcVXyhRt2UKLHhp9paw7Rj3Mma6TBsQwi8FC1bTS3S2B8jsigbQIeAwIxBrhTJKQt%2FosBhUZAyjyo8ouFrNfXhf982EPBNbWp8eaA2xEFGRebZNrqpMq0YQVe6F2lYmeOKHtPr6muw6CpanmkKtObpu2swc46UPbKPwNgZJFiIkZDzz7LDmWm%2FxODfn6wOTPPjeXSelMmCG2ObGp7kggNL%2FK9nSTYvk%3D)

阅读量:148

点赞量:0

问AI
MessageBox_Hook.js: const MessageBox = useMemo(() => { return ( {title} {message} {buttons} ); }); App.js return ( 123 show("标题", "123", "yesno")}>显示 show("标题", "456", "ok")}>显示2 {MessageBox} );