Не отображается виджет Telegram Login на странице React

Question

У меня есть вот такая страница:

import React, { useEffect } from 'react';
import { useCookies } from 'react-cookie';
import { useNavigate } from 'react-router-dom';

const MainPage = () => {

    return (
        <div>
            <script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="ТУТ УКАЗАН БОТ" data-size="large" data-radius="5" data-auth-url="ТУТ УКАЗАН ДОМЕН" data-request-access="write"></script>
        </div>
    );
};

export default MainPage;

Но почему то этот виджет вообще не отображается. Сайт стоит на хостинге с доменом. Всё как надо. Но он просто не появляется. Прошу помощи

Answer 1

В принципе ответ не заставил себя ждать, react не обрабатывает вставку скриптов в компоненты. Реализовал вот так:

import React, { useEffect, useRef } from 'react';
import { useCookies } from 'react-cookie';
import { useNavigate } from 'react-router-dom';

const MainPage = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = "https://telegram.org/js/telegram-widget.js?22";
        script.setAttribute('data-telegram-login', "ТУТ НАЗВАНИЕ БОТА");
        script.setAttribute('data-size', "large");
        script.setAttribute('data-radius', "5");
        script.setAttribute('data-auth-url', "ТУТ ОБРАТНЫЙ ЮРЛ");
        script.setAttribute('data-request-access', "write");
        script.async = true;
        ref.current.appendChild(script);
    }, [cookies, navigate]);

    return (
        <div>
            <div ref={ref} />
        </div>
    );
};

export default MainPage;

БЛОГ НА HUSL

Не отображается виджет Telegram Login на странице React

Ответы (1 шт):