Загрузка тега скрипта вручную в проекте React ⇐ Javascript

[Anonymous]

Я хочу загрузить виджет с сайта Bookeo в мой сайт, они предоставляют тег сценария, который я должен добавить в свой сайт, и они обрабатывают остальные, я написал код, и все работает Дом успешно, но проблема в том, что я должен перезагрузить окно, по крайней мере, для виджета, чтобы он был До тех пор, пока я не визуал экран вручную < /p>
Код виджета < /p>

Код: Выделить всё

import React, { useEffect } from "react";

const BookingWidget = (props) => {
useEffect(() => {
// Load the widget script when the component mounts
const script = document.createElement("script");
script.onload = () => {
console.log("Widget script loaded and ready to initialize");
// state in the parent
// I was trying to force component to reload (doesn't work)
props.set_update_widget(true);
};
script.onerror = (error) => {
console.error("Error loading widget script:", error);
};
script.type = "text/javascript";
script.src = props.widget_src;
script.async = true;
const target = document.getElementById("bookeo-widget-container");
target.innerHTML = "";
target.appendChild(script);
return () => {
target.innerHTML = ""; // Remove widget if the component is unmounted
};
}, []);

return (



);
};

export default BookingWidget;

< /code>
родительский компонент < /pbr /> import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import { tour_data } from "../assets/data";
import BookingWidget from "../components/BookingWidget";

const TourPage = () =>  {
const [update_widget, set_update_widget] = useState(false);
let icon_filtering = {
smallgroup: (



),
duration3hours: (



),
skiptheline: (



),
smallgrouptour: (



),
mobileticketing: (



),
freecancellation: (



),
livetourguide:  (



),
expressentrance: (



),
instantconfirmation: (



),
};
let { tourId } = useParams();
useEffect(() => {
// to insure that the page start from the top
window.scrollTo(0, 0);

// for the map view
const map = L.map("map").setView([0, 0], 2); // Initial placeholder view

// Fetch coordinates from Nominatim API
fetch(
`https://nominatim.openstreetmap.org/search?format=json&q=${tour_data.internal_ui.meeting_point
.split(",")[0]
.replaceAll(" ", "+")}`
)
.then((response) => response.json())
.then((data) => {
const lat = data[0].lat;
const lon = data[0].lon;

// Set the map to the location
map.setView([lat, lon], 12);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(map);

// Add marker
L.marker([lat, lon])
.addTo(map)
.bindPopup(tour_data.internal_ui.meeting_point.split(",")[0])
.openPopup();
})
.catch((error) => console.error("Error fetching location:", error));
}, []);
return (


[img]{tour_data.internal_ui.main_image} alt=[/img]

Experience Rome with
Tours of Rome



{tour_data.internal_ui.offers.map((offer, id) => (


{
icon_filtering[
`${offer.title.replaceAll(" ", "").toLowerCase()}`
]
}

{offer.title}
{offer.info}

))}



[img]{tour_data.external_ui.main_image} alt=[/img]

{tour_data.external_ui.title}
{tour_data.external_ui.introduction}

{tour_data.external_ui.stars}
{tour_data.external_ui.rating}



Tour Details

{tour_data.internal_ui.tour_details.map((tour_detials, id) => (



{
icon_filtering[
`${tour_detials.title.replaceAll(" ", "").toLowerCase()}`
]
}

{tour_detials.title}
{tour_detials.info}


))}

Full Description

Things To Know

{tour_data.internal_ui.description.things_to_know.map((info, id) => (

{info}

))}

Inclusions and Exclusions

{tour_data.internal_ui.inclusions.map((inclusion_data, id) => (




{inclusion_data}

))}
{tour_data.internal_ui.exclusions.map((exclusions_data, id) => (




{exclusions_data}

))}


Meeting Point

{tour_data.internal_ui.meeting_point}





);
};

export default TourPage;

Подробнее здесь: https://stackoverflow.com/questions/793 ... ct-project