javascript - 将 React 组件附加到 JQuery 对话框

Question

我正在将 React 组件附加到现有 Web 应用程序中的几个 JQuery 对话框中。我没有使用 JQuery 来操作 DOM(除了最初附加到对话框之外)，我让 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

我怀疑 React 会非常强烈地反对这一点。最好先创建 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