Исправлен баг, из-за которого не отображалась кнопка входа через telegram
This commit is contained in:
@@ -28,9 +28,18 @@ export function TelegramLoginButton({
|
|||||||
onAuth: (user: TelegramUser) => void;
|
onAuth: (user: TelegramUser) => void;
|
||||||
}) {
|
}) {
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
// onAuth держим в ref, чтобы он НЕ был в зависимостях эффекта: иначе новая инлайн-
|
||||||
|
// функция на каждый рендер пересоздавала бы виджет (а cleanup сносит его innerHTML
|
||||||
|
// в момент отрисовки — в dev со StrictMode кнопка из-за этого не появлялась).
|
||||||
|
const onAuthRef = useRef(onAuth);
|
||||||
|
onAuthRef.current = onAuth;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.__fsTelegramAuth = (user) => onAuth(user);
|
window.__fsTelegramAuth = (user) => onAuthRef.current(user);
|
||||||
|
const node = ref.current;
|
||||||
|
if (!node) return;
|
||||||
|
node.innerHTML = ""; // на случай повторного монтирования (StrictMode)
|
||||||
|
|
||||||
const script = document.createElement("script");
|
const script = document.createElement("script");
|
||||||
script.src = "https://telegram.org/js/telegram-widget.js?22";
|
script.src = "https://telegram.org/js/telegram-widget.js?22";
|
||||||
script.async = true;
|
script.async = true;
|
||||||
@@ -39,14 +48,12 @@ export function TelegramLoginButton({
|
|||||||
script.setAttribute("data-userpic", "false");
|
script.setAttribute("data-userpic", "false");
|
||||||
script.setAttribute("data-request-access", "write");
|
script.setAttribute("data-request-access", "write");
|
||||||
script.setAttribute("data-onauth", "__fsTelegramAuth(user)");
|
script.setAttribute("data-onauth", "__fsTelegramAuth(user)");
|
||||||
|
node.appendChild(script);
|
||||||
|
|
||||||
const node = ref.current;
|
|
||||||
node?.appendChild(script);
|
|
||||||
return () => {
|
return () => {
|
||||||
if (node) node.innerHTML = "";
|
node.innerHTML = "";
|
||||||
delete window.__fsTelegramAuth;
|
|
||||||
};
|
};
|
||||||
}, [botUsername, onAuth]);
|
}, [botUsername]); // только смена бота пересоздаёт виджет
|
||||||
|
|
||||||
return <div ref={ref} />;
|
return <div ref={ref} />;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user