Вставить виджет Pinterest в React
mysqldump -u root -p --no-data dbname > schema.sql
mysqldump -u root -p drop dbname
mysqldump -u root -p < schema.sql
2 ответа
react-pinterest npm я нашел решение в этой проблеме https://github.com/pinterest/widgets/issues/13 .
Похоже, вы уже приблизились, добавив атрибут данных data-pin-build="doBuild", но не вызываете doBuild(), когда пользователь возвращается к компоненту после перехода по другому маршруту. Добавление атрибута данных указывает pinit.js добавить doBuild() в глобальную область, но не вызывает автоматически функцию при перемонтировании компонента.
Попробуйте заменить функцию componentWillMount на что-то вроде этого:
componentDidMount() {
if (!window.doBuild) {
this.preloadWidgetScript();
} else {
window.doBuild();
}
}
preloadWidgetScript = () => {
const script = document.createElement('script');
script.async = true;
script.dataset.pinBuild = 'doBuild';
script.src = '//assets.pinterest.com/js/pinit.js';
document.body.appendChild(script);
}
Еще одна вещь, на которую следует обратить внимание - это изменение с componentWillMount на componentDidMount, это необходимо, чтобы убедиться, что ссылка для встраивания перед выполнением doBuild().
В моем случае, используя ответ @ n33kos, он работает с useEffect и до сих пор каждый раз (без проверки, добавил ли он скрипт или нет). Здесь ссылка <a> для интереса существует в файле уценки, который внедряется как HTML
useEffect(() => {
const script = document.createElement('script')
script.async = true
script.type = 'text/javascript'
script.dataset.pinBuild = 'doBuild'
script.src = '//assets.pinterest.com/js/pinit.js'
document.body.appendChild(script)
if (window.doBuild) window.doBuild()
}, []) // only run once