每次在组件中加载组件时，如何调用$（）。dropdown函数？

Question

在对我的react应用进行编码期间，我决定使用语义UI来设计此应用。所以我在index.html文件中实现了它。就个人而言，我更喜欢使用类而不是React Semantic UI的组件。我需要使用下拉功能，所以我添加了下一个代码：

<script language='javascript'>
  $(document).ready(function(){
    $('.ui.dropdown').dropdown();
  });
</script>

一切都很好，首次加载页面时会激活下拉菜单。但是，当我决定使用react-router并加载一个内部带有下拉列表的新组件时，该组件不会打开。因此，我的想法是在功能componentDidMount()中应用下拉功能。但是我不知道该怎么做。 我一直在使用little-loader库中的负载，但是它甚至无法正常工作。

componentDidMount() {
  load('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js', function(err) {
    $(document).ready(function(){
      $('.ui.dropdown').dropdown();
    })
  })
}

这是我收到的错误消息：

由于缺乏动画，我的想法是不使用React语义UI组件。需要帮助。

Answer 1

我认为您只需要更改

$(document).ready(function(){
  $('.ui.dropdown').dropdown();
});

到

$('.ui.dropdown').dropdown();

因为，即使您每次安装组件时都在运行第一个代码，但内部代码$('.ui.dropdown').dropdown();仅在整个页面刚刚加载时才运行（并且加载新的组件/路由，当然不会不会触发该事件。

如果出现有用的错误消息，您可能还想在console.log(err);上方添加$('.ui.dropdown').dropdown();。