如何在React,Riot 2.0中使用jQuery插件

Question

我有一个jQuery繁重的应用程序,我在中间有很多jQuery插件,我想重组应用程序,所以我正在寻找不同的框架,如Angular,React,Riot 2.0等.

我喜欢React和Riot,但是我无法弄清楚我是如何将这个典型的jQuery应用程序(未经计量访问DOM)带入这个虚拟DOM的新世界等等.

其中一些组件很复杂,我不想将它们全部重写为"VDOM方式"并创建另一个噩梦.

有没有人对此有答案？也许jQuery插件重的应用程序不适合,或者有没有办法分割/组合使用两者的UI,或者可能是一个与jQuery兼容的React/Riot框架？

Answer 1

要在Riot 2.0自定义标记内使用jQuery访问DOM,您可以使用mount事件,this.root如下所示:

<my-custom-tag>
  <h3>Riot.JS Custom tag + jQuery plugin</h3>
  <p>My paragraph</p>
  <script>
    this.on('mount', function() {
      var $node = $(this.root);
      $node.find('p').html('updated by jQuery!');
    });
  </script>
</my-custom-tag>

我不确定它是"最佳实践",但它适用于Riot 2.0.10(2015年2月19日).

如果自定义标记包含表单或输入元素,它更简单,您可以通过其name属性访问它们,您不需要mount事件:

<my-custom-form>
  <input name="email" type="text">
  <script>
    $(this.email).val('mike@worldcompany.com');
  </script>
</my-custom-form>

Answer 2

Riot 2.0仅在4天前发布,所以显然还没有扩展.

但是,在React社区中使用自定义标签或"组件"将基于jQuery的应用程序转换为"现代世界"是一个很好的选择.

自定义标记允许您构建可重用的客户端代码片段,而不需要jQuery选择器和操作方法.HTML和JS在文件系统上的分散程度较低.

Riot 2.0旨在与jQuery一起发挥作用.您可以将jQuery插件与自定义标签一起使用,这样您就可以迭代转换应用程序 - 如果您愿意,可以在当时使用一个标签.

Answer 3

在 Angular 中，有人可能已经重新创建了你想要的东西。您可以使用指令来实现可重用组件或包装现有组件。包装插件：

• 在链接中初始化（基于隔离范围）
• 用于scope.$watch(key, fn)在发生变化时更新插件
• 在插件回调中使用scope.$apply()来告诉 Angular 某些内容可能已更改，更新任何相关的双向绑定，并调用任何相关的表达式绑定
• 用于scope.$on('$destroy', fn)清理
• 有关示例和 api 设计，请参阅 ui-bootstrap。

这同样适用于 React，但是是组件而不是指令。

• 在 componentDidMount 中初始化（基于 props）
• 在componentDidUpdate中更新插件（基于props）
• 调用this.props.onWhatever插件回调
• 在 componentWillUnmount 中清理
• 有关示例和 api 设计，请参阅react-bootstrap。

我认为 Riot 与此无关。