javascript - 将React集成到现有的jQuery SPA中(Integrating react into existing jQuery SPA)

Question

I currently have a single page app that was built in jQuery a few years ago.(我目前有一个几年前用jQuery构建的单页应用程序。)

I want to slowly transition to react but I'm running into issues with building out sections at a time.(我想慢慢过渡以做出反应，但是每次构建部分时遇到问题。) When calling reactDom.render() you have to pass in a parent "root" element that wraps the body of the site.(调用reactDom.render（）时，您必须传递包裹网站正文的父级“ root”元素。) I can't do this as it causes too many conflicts with existing JS and breaks the entire app.(我无法执行此操作，因为它会与现有JS产生太多冲突，并破坏整个应用程序。) Is there a way that I can target multiple sections of an app without a parent container?(有没有一种方法可以在没有父容器的情况下定位应用程序的多个部分？) For example(例如) <div id="main-page"> <div id="header"> <div id="search">load component here</div> </div> <div class="content"> <div class="section"> load component here </div> </div> </div> Load react into the #search and #section elements without a wrapping reactDom.render(<component/>, document.getElementById('main-page') .(将响应加载到#search和#section元素中，而无需包装reactDom.render(<component/>, document.getElementById('main-page') 。) What would be the best practice in this situation without re-writing the whole front-end?(如果不重写整个前端，在这种情况下的最佳实践是什么？)   ask by Lachie Mckelvie translate from so

Answer 1

You delegate DOM operations to jQuery & React both.(您将DOM操作委派给jQuery和React两者。)

That's why there are so many conflicts.(这就是为什么有这么多冲突。) So the best practice is to use one of the both.(因此，最佳做法是同时使用两者之一。) Considering the actual situation, your app should be split into several parts.(考虑到实际情况，您的应用程序应分为几个部分。) Every part is a sub-app and be managed by either jQuery or React, not both.(每个部分都是一个子应用程序，并由jQuery或React进行管理，而不是由两者进行管理。) React allows you call ReactDOM.render many times in one web page.(React允许您在一个网页中多次调用ReactDOM.render 。) Every ReactDOM.render will run separately.(每个ReactDOM.render将单独运行。)