反应不变违规

Question

我有一个Bootstrap模式，默认情况下不显示。因此，我添加了一个应该显示模态的jQuery脚本。

我的代码如下：

<div>
   <div id='tableContainer'>
       <table className="table table-condensed"></table>
   </div>

   {this.state.displayDeleteModal
                    ?
                    <div>
                        <div id="myModal" className="modal fade modalMaxSize" role="dialog">
                            <div className="modal-dialog">

                            <div className="modal-content">
                              <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal">&times;</button>
                              </div>
                              <div className="modal-body">
                                <p>Are you sure you want to delete selected elements?</p>
                              </div>
                            </div>

                          </div>
                        </div>
                        <script>
                            {$(function(){
                                $('#myModal').modal('show');
                            })}
                        </script>
                    </div>
                    :
                    null
                }

</div>

this.state.deleteDisplayModal设置如下：

getInitialState: function() {
    return {displayDeleteModal: false};
},

然而，在我添加了jQuery脚本之后，我开始收到以下错误：

  

未捕获错误：不变违规：traverseAllChildren（...）：遇到无效的孩子; DOM元素不是React组件的有效子元素。

造成这种情况的原因是什么？

另外，我使用jQuery的方式是正确的吗？