时间戳

首页 > 解决方案 > 如何在反应组件中引用外部Javascript文件

javascript - 如何在反应组件中引用外部Javascript文件

问题描述

这是我在 index.html 文件中引用的timeline.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 文件中，有一个对时间线函数的引用，其中时间线模式更改为水平。

<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 组件中，因为当我运行代码时，时间线显示为垂直而不是水平。我的反应组件：返回（

2020 年 1 月 13 日

F2F

……

标签： javascriptjqueryreactjs

解决方案

之前有人问过类似的问题。您可以查看以下链接。希望这可能会有所帮助。

https://stackoverflow.com/a/53396827/15004619

转到您的 index.html 文件并在那里导入脚本

 <script type="text/javascript">
  function fun(){
    alert('Index.html is the main file to look at.');
  }
</script>

在你的组件中使用window对象。

  componentWillMount() {
  window.fun();
}

推荐阅读