[英]How to reference external Javascript file inside react component
這是我在 index.html 文件中引用的時間線.min.js 文件。 請注意,我沒有包含完整的代碼。
function timeline(e, v) {
var g = [],
p = "Timeline:",
t = window.innerWidth,
i = void 0,
o = 0,
b = {
forceVerticalMode: { type: "integer", defaultValue: 600 },
horizontalStartPosition: { type: "string", acceptedValues: ["bottom", "top"], defaultValue: "top" },
mode: { type: "string", acceptedValues: ["horizontal", "vertical"], defaultValue: "vertical" },
moveItems: { type: "integer", defaultValue: 1 },
rtlMode: { type: "boolean", acceptedValues: [!0, !1], defaultValue: !1 },
startIndex: { type: "integer", defaultValue: 0 },
verticalStartPosition: { type: "string", acceptedValues: ["left", "right"], defaultValue: "left" },
verticalTrigger: { type: "string", defaultValue: "15%" },
visibleItems: { type: "integer", defaultValue: 3 },
};
function n(e, t, i) {
t.classList.add(i), e.parentNode.insertBefore(t, e), t.appendChild(e);
}
然后在同一個 Javascript 文件的末尾我有這個:
window.jQuery &&
(window.jQuery.fn.timeline = function (e) {
return timeline(this, e), this;
});
現在,在 index.html 文件中,有對時間線 function 的引用,其中時間線模式更改為水平。
<script type="text/javascript" src="../src/assets/js/timeline/timeline.min.js"></script>
<script>
timeline(document.querySelectorAll('.timeline'), {
forceVerticalMode: 700,
mode: 'horizontal',
verticalStartPosition: 'left',
visibleItems: 7
});
console.log($("#ble").attr("class"));
</script>
現在,我想將所有這些集成到我的 React 組件中,因為當我運行代碼時,時間線顯示為垂直而不是水平。
我的反應組件:返回(
F2F
……之前有人問過類似的問題。 您可以查看以下鏈接。 希望這可能會有所幫助。
https://stackoverflow.com/a/53396827/15004619
Go 給你 index.html 文件並在那里導入腳本
<script type="text/javascript">
function fun(){
alert('Index.html is the main file to look at.');
}
</script>
在您的組件中使用window
object。
componentWillMount() {
window.fun();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.