Javascript 指向leanModal.js的链接在“由HTML呈现”链接中可以正常工作，但不在React中

我正在使用精益模式：在Rails应用程序中使用React前端

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

我已经加载jQuery并检查了10次代码是否相同。是什么导致了这样的问题

以下是React中的链接代码：

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

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

$（函数（）{
$（'a[rel*=leanmodel]'）.leanmodel（{top:200，closeButton:“.model_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>;
    }
});

var leanmodel=React.createClass({
componentDidMount:function（）{
$（this.getDOMNode（））.leanmodel({
顶部：this.props.top | | 200
});    
},
render:function（）{
返回{this.props.children}；
}
});

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

---

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

通过react进行渲染时，当jQuery代码触发时，链接可能不存在。稍后将呈现并附加到DOM。感谢您的评论。另一个回复似乎证实了您的正确性。谢谢您的详细回复！

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