#javascript #jquery #html #reactjs
#javascript #jquery #HTML #reactjs
Вопрос:
Я настраиваю плагин анимации, используя внешний файл Javascript для создания облака тегов Globe. Я был протестирован на обычном html, он работает хорошо, но когда я вызываю ReactJS, он всегда выдает мне сообщение об ошибке, подобное этому:
Ошибка типа: jquery__WEBPACK_IMPORTED_MODULE_6___default(…)(…).SVG3DTagCloud не является функцией
Я использую метод жизненного цикла, подобный этому, он успешно внедряет JS-файл в HTML-тело, но все еще не работает и выдает мне сообщение об ошибке.
componentDidMount() {
var cloudTag = document.createElement('script');
cloudTag.src = '/svg3dtagcloud.min.js';
cloudTag.async = true;
$(document).ready(function () {
// This is was on the documentation https://github.com/NiklasKnaack/jquery-svg3dtagcloud-plugin
var entries = [
{label: 'Tag One', url: '#', target: '_top'},
{label: 'Tag Two', url: '#', target: '_top'},
{label: 'Tag Three', url: '#', target: '_top'},
{label: 'Tag Four', url: '#', target: '_top'},
{label: 'Tag Five', url: '#', target: '_top'}
];
var settings = {
entries: entries,
width: 480,
height: 480,
radius: '65%',
radiusMin: 75,
bgDraw: true,
bgColor: '#111',
opacityOver: 1.00,
opacityOut: 0.05,
opacitySpeed: 6,
fov: 800,
speed: 1,
fontFamily: 'Oswald, Arial, sans-serif',
fontSize: '15',
fontColor: '#fff',
fontWeight: 'normal',
fontStyle: 'normal',
fontStretch: 'normal',
fontToUpperCase: true,
tooltipFontFamily: 'Oswald, Arial, sans-serif',
tooltipFontSize: '11',
tooltipFontColor: '#fff',
tooltipFontWeight: 'normal',
tooltipFontStyle: 'normal',
tooltipFontStretch: 'normal',
tooltipFontToUpperCase: false,
tooltipTextAnchor: 'left',
tooltipDiffX: 0,
tooltipDiffY: 10
};
cloudTag.onload = () => {
$('#holder').SVG3DTagCloud(settings);
}
});
document.body.appendChild(cloudTag);
}
Как запустить внешний файл плагинов Javascript для правильной работы в ReactJS? Есть ли какой-либо метод для запуска функции внутри?
Комментарии:
1. добавьте это внутри componentDidMount if(!jQuery().SVG3DTagCloud) { $.fn.SVG3DTagCloud=function(){} }
2. @Sujit. Как он это сделал, вы можете видеть из кода
3. извините, комментарий был отправлен неполным. отредактировал его
4. Идея плохая — вы не можете быть уверены, что библиотека перестанет загружаться после того, как вы закрепите исходный код внутри тега script, потому что функция инициализации библиотеки может быть асинхронной. Лучший способ — импортировать его из npm, если это возможно (пакеты github, которые вы также можете загрузить) или загрузить все библиотеки CDN в начале и создать splashscreen. Поскольку вам приходится ждать в библиотеке, вы также можете установить для async значение false;
5. @Sujit. Warrier спасибо, сообщение об ошибке исчезло, но по-прежнему ничего не возвращает
Ответ №1:
Если вы можете, вам не следует загружать библиотеки подобным образом, если только вы не можете сделать это реактивным способом. То, что вы делаете в этом коде, вы пытаетесь создать асинхронный побочный эффект в компоненте. Для асинхронных действий внутри компонента вам следует попробовать какое-нибудь промежуточное программное обеспечение. Например. https://github.com/redux-observable/redux-observable если вы используете redux для глобального состояния или https://www.npmjs.com/package/redux-thunk . Но из соображений производительности я бы просто загрузил эту библиотеку в начале и даже кэшировал ее с помощью web wroker, нет большого выигрыша, загружая ее только при монтировании компонента.
Комментарии:
1. Я пытаюсь использовать false async и по-прежнему ничего не возвращаю.
2. @Dexter async false можно установить, кстати, чтобы узнать порядок загруженных библиотек — просто в html добавьте эту библиотеку старым способом. Вы также можете попробовать загрузить библиотеку в виде типа содержимого text и установить содержимое cloudTag.innerText в загруженный код — так вы сможете точнее узнать, когда выполняется код. Но загрузка происходит синхронно, как я уже сказал, поэтому используйте либо . тогда или синтаксис await, или промежуточное программное обеспечение.