Question

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

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

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

以下是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。

感谢您的帮助！

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

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

链接到leanModal.js可以很好地通过HTML链接呈现，但不在React中

1 个答案: