我正在将 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);
}
}
最佳答案
我怀疑 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
关于javascript - 将 React 组件附加到 JQuery 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46123772/