Question

我正在使用react js，并且正在尝试使用webticker lib webticker

这是我的代码：

$(document).ready(function(){
    $('#webticker').webTicker()
});


class App extends Component {
..... // the rest of the component then in render 

<ul id="webTicker">
    <li>This List Item will scroll infintely</li>
    <li>And this one will follow it</li>
    <li>Finally when it goes out of screen, it will queue again at the end</li>
</ul>

但我收到此错误

TypeError: jquery__WEBPACK_IMPORTED_MODULE_7___default(...)(...).webTicker is not a function

我尝试将其加载到componentDidMount中，还尝试了document.ready，但这也给了我同样的错误。

Answer 1

同时使用JQuery和React绝不是一个好主意，因此此解决方案将尝试让它们分别操作。

考虑到React会将自己附加到DOM中的特定div，我们可以将我们的网络股票作为其同级物品。

例如

<!-- React attaches to this -->
<div id="root"></div>

<!-- Web Ticker attaches to this -->
<ul id="webTicker" style="display:none">
    <li>This List Item will scroll infintely</li>
    <li>And this one will follow it</li>
    <li>Finally when it goes out of screen, it will queue again at the end</li>
</ul>

<!-- Don't forget to load scripts -->
<script src="./path/to/jquery.min.js"></script>
<script src="./path/to/jquery.webticker.min.js"></script>
<script src="./path/to/your/scripts.js></script>

现在，您只想显示已加载React的列表，因此您可以执行类似的操作

$(document).ready(function(){
    if ($('#root').children().length > 0) {
        $('#webticker')
          .show()
          .webTicker()
    }
});

为什么我看到webpack模块7不起作用？

1 个答案: