ReactコンポーネントをJQueryダイアログに追加する

Question

Reactコンポーネントを既存のWebアプリケーションのいくつかのJQueryダイアログに追加しています。私はDOMを操作するためにJQueryを使用していません（ダイアログの最初の部分を除いて）、Reactにすべてを処理させています。状態が変わるとReactコンポーネントもダイアログの中に入ります。 Reactコンポーネントが最初にレンダリングされたdivに存在しないため、このように予期しない問題が起きる可能性はありますか？また、これは悪い習慣とみなされますか？ここではいくつかのサンプルコードは、次のとおりです。

index.js

const createStoreWithMiddleWare = applyMiddleware()(createStore); 
ReactDOM.render(
    <Provider store={ createStoreWithMiddleWare(reducers) }> 
     <App/> 
    </Provider>, 
    document.getElementById('app') 
); 

アプリケーションコンポーネント

export default class App extends Component{ 
    render() { 
     return(
      <div> 
       <ChatWindow /> 
      </div> 
     ); 
    } 
} 

ChatWindowコンポーネント

class ChatWindow extends Component { 
render() { 
    return (
     <div id="ChatContainer"> 
      <div className='ChatMenu' id="MainChat"> 
      <UserList></UserList> 
      <ChatMessageView></ChatMessageView> 
      <UserInput></UserInput> 
      </div> 
     </div> 
    ); 
} 

    componentDidMount() { 
     this.createDialog(); 
    } 

    createDialog(){ 
     const dialogId = "chatDialog"; 
     const _dialogId = `#${dialogId}`; 
     const chatDiv = `<div id="${dialogId}"></div>`; 

     $(chatDiv).dialog({ 
       width: 650, 
       height: 625 
      }); 

     $(_dialogId).dialog(); 
     $('#ChatContainer').appendTo(_dialogId); 
    } 
} 

Answer 1

私は非常に強くこれに反対しますリアクト疑い。 jQueryダイアログを最初に（外側に）作成してからReactコンポーネントを内部にレンダリングする方が良いでしょう。

var $chatDiv = $("<div class='dialog'>"); //create new element 
$("body").append($chatDiv);    //add it to page 
$chatDiv.dialog({       //make a dialog 
    width: 650, 
    height: 625 
}); 

ReactDOM.render(<ChatWindow />, $chatDiv[0]); //render component inside