指向leanModal.js的链接在通过HTML链接呈现时工作良好，但在React中则不然

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

本文关键字：链接 但在 React 工作 js leanModal 指向 HTML      更新时间：2023-09-26

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

当我把指向模态的链接放在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。

谢谢你的帮助！

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

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

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

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

相关文章：