到leanModal.js 的链接在HTML 链接呈现时工作正常，但在React 中却不行答案

【问题标题】：Link to leanModal.js works fine in rendered by HTML link but not within React到leanModal.js 的链接在HTML 链接呈现时工作正常，但在React 中却不行
【发布时间】：2015-03-03 01:49:27
【问题描述】：

我在带有 React 前端的 Rails 应用程序中使用精益模式：http://leanmodal.finelysliced.com.au/。

当我将链接放在 application.html.erb 中的模式时，它工作正常，但是当使用相同的代码通过 React 链接加载时，什么也没有发生。

如果代码相同，我已经加载并检查了 10 次 jQuery。什么可能导致这样的问题？

这是 React 中的链接代码：

<a rel="leanModal" name="login" href="#login">

模板文件（html.erb）脚本：

<script type="text/javascript">
    $(function() {
        $('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });       
    });

我正在从 Rails 中的 application.js 文件加载模态 JS。

感谢您的帮助！

【问题讨论】：

当通过 React 渲染时，当 jQuery 代码触发时链接可能不存在。它稍后会被渲染并附加到 DOM。
感谢您的评论。另一个回复似乎证实你是正确的。

标签： javascript jquery ruby-on-rails ruby reactjs

【解决方案1】：

您应该将与 DOM 交互的东西（例如 jQuery 插件）包装在一个组件中。

var LeanModal = React.createClass({
    componentDidMount: function(){
        $(this.getDOMNode()).leanModal({
           top: this.props.top || 200
        });    
    },
    render: function(){
        return <div>{this.props.children}</div>;
    }
});

请注意，您还需要提供一个 componentWillUnmount 来处理清理，并且插件不能执行添加/删除元素之类的操作。不允许清理或进行破坏性更改的插件与 react 不兼容。

有时仅使用现有的 CSS 并使用 react 组件而不是 jQuery 插件来实现它可能非常简单，并且最终会得到更好的结果。

【讨论】：

感谢您的详细回复！