0

У меня есть родительский компонент, в нем я принимаю пропсами язык, в зависимости от языка я должен рендерить разметку. В скрипте я подключаю jivo chat. После смены языка в данный момент у меня виджет не меняется на другой язык, но если я перезагружу страницу то подгружается уже язык какой мне нужен. Как мне добиться поведения когда при смене языка у меня менялся бы виджет?

Компонент с виджетом:

type Props = {
    lang?: string | null;
};

export const Jivo = (props: Props) => {
    const { lang } = props;

    return (
        <>
            {lang === 'ru' ? (
                <script src='//code.jivo.ru/widget/v0tzhy0uhW' async></script>
            ) : (
                <script src='//code.jivo.ru/widget/sIH7pKEUXN' async></script>
            )}
        </>
    );
};

1 ответ 1

0

Создать для компонента состояние и повесить useEffect, который будет срабатывать при изменении props.lang и сохранять данные в состояние компонента.

При изменении состояния, произойдет ререндер

export const Jivo = (props: Props) => {
    const [lang, setLang] = useState(props.lang);

    useEffect(() => {
        setLang(lang);
    }, [props.lang]);

    return (
        <>
            {lang === 'ru' ? (
                <script src='//code.jivo.ru/widget/v0tzhy0uhW' async></script>
            ) : (
                <script src='//code.jivo.ru/widget/sIH7pKEUXN' async></script>
            )}
        </>
    );
};
5
  • Насколько я знаю когда в компонент приходят новые пропсы то он и так рендерится, в данном случае ваш способ не сработал. Всем так же остается виджет который зарендерился при первом рендере
    – yOz
    1 фев в 12:47
  • @yOz Впихните туда console.log() и посмотрие, он вообще дергается? И не может ли быть такого, что компонент отрабатывает верно, но вот второй скрипт не может перезатереть первый?
    – SwaD
    1 фев в 12:54
  • Вот и я не пойму в чем дело. Пропсы приходят, лог выводит смену языка. Я даже пробовал получить до него доступ по id и потом удалить из дом елемента по условию - так же не сработало. Хочу понять в чем может быть проблема.. По какой-то причине он не хочет делать условие пока я не перезагружу страницу - очень странно, мне кажется, что я что-то упускаю..
    – yOz
    1 фев в 13:08
  • 1
    Я не знаю, поможет или нет... Ну как на попробовать. Добавьте этим <script> id или data-id что бы можно было найти в DOM. В момент смены попробуйте принудительно удалить из DOM старый скрипт, а уже потом добавить новый. Я просто не знаю, что делают эти скрипты у вас на сайте и как из них вы данные тянете. Возможно имеет смысл попробовать что то принудительно перинициализировать...
    – SwaD
    1 фев в 13:20
  • setLang(lang); - тут случайно не опечатка? Нужно же setLang(props.lang); 2 фев в 0:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.