Question

我正在尝试使用jquery将react组件安装到bootstrap模式体，然后在成功的ajax请求之后打开模式，但是我似乎无法加载react组件。这就是我到目前为止所做的：

成功后我调用assignModal函数，我在父反应组件中。

assignModal: function(){
 $('.assign-modal-body').html(<Cortex.VulnerabilityList.AssignModal parent={this}/>);
 $("#vuln-assign-modal").modal('show');}

这是反应组件

Cortex.VulnerabilityList.AssignModal = React.createClass({
 componentDidMount: function() {
 console.log("Component mounted")
},

 render: function() {
  return (
   <h1>Hello</h1>
  )
 }
});

Answer 1

根据我的经验，如果您尝试使用jQuery和React来操作DOM，那么您将遇到麻烦。如果它对你来说是一个选项，摆脱jQuery并完全接受React的声明性编程范例。

但也许你有想要使用的jQuery小部件。在这种情况下，尝试设计您的应用程序，使jQuery永远不会写入您的React树中的DOM。

所以有几个选择：

使用jQuery和React，但单独使用 - 让您的React应用程序从某个根<div>降序，并将您的模态放在兄弟<div>中。然后只使用jQuery和普通的HTML来渲染你的模态而不涉及React。
停止使用jQuery - 使用React管理您的模式。因此，不是通过使用jQuery设置DOM元素的innerHTML来响应assignModal，而只需将一些全局状态设置为showModal = true，并在模式if (!showModal) return null的render方法中设置类似的东西。我最近对此wrote a post。

在ajax成功时安装reactjs组件

1 个答案: