Link 到 leanModal.js 在 HTML link 渲染时工作正常但在 React 中不行

Question

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

当我将 link 放入 application.html.erb 中的模式时，它工作正常，但是当使用相同的代码通过 React link 加载时，没有任何反应。

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

这是 React 中的 link 代码：

<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。

感谢您的帮助！

Answer 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 来处理清理，并且该插件无法执行 add/remove 元素之类的操作。不允许清理或进行破坏性更改的插件与 React 不兼容。

有时仅使用现有的 CSS 实现它并使用 React 组件而不是 jQuery 插件可以非常简单并最终获得更好的结果。

Link 到 leanModal.js 在 HTML link 渲染时工作正常但在 React 中不行

Link to leanModal.js works fine in rendered by HTML link but not within React

javascript

ruby

jquery

ruby-on-rails

reactjs