javascript - 如何构建使用在不同框架中呈现的DOM的React代码？

我是React和jsx的新手。

我有一个项目，这是我第一次使用React，但是页面中仍有某些部分不是基于React的，而是使用其他框架。在将旧代码重构为使用React或某种不可知论的方式之前，我现在需要同时使用两个框架。

该页面需要懒惰地包含此其他框架，因此加载可能需要一些时间。一旦可用，我可以创建一个对象并调用.placeAt(id)告诉该对象在何处呈现其DOM。

以下代码只是我当前解决方案的示例。

import React from 'react';
import loadWidget from './loadWidget';

function App() {
  return (
    <div id="app"></div>
  );
}

// loadWidget returns a Promise object which resolves with the Widget class asynchronously
// I need to create a new Widget that will then be placed into the App's <div> using the ID
loadWidget().then(Widget => {
  new Widget().placeAt('app'); // Renders into the div with id "app"
});

export default App;

上面的代码可以工作，但是有一些问题使我明白，我还不能很好地适应这个React编程模型，在那里我更习惯于面向对象的编程。在上面的代码中，仅当index.js恰好一次调用App()函数并且必须在loadWidget()许诺返回之前调用它时，它才有效。就我而言，这始终是正确的，因为对App的调用是同步的，并且我知道它只会发生一次，但是我对解决方案不满意。

最佳答案

您可以简单地使用React的其他生命周期方法。
据我了解，您正在寻找一种基于

我相信您要寻找的东西可以适应

每次调用您的componenetDidUpdate(props)或props时都会调用states。

因此，您可以做的是使用State，然后将更新后的值置于需要呈现HTML的状态。

所以像这样

<div> Render some HTML by ${myStateVariable} </div>

这将有助于您呈现HTML的选择，但是有一些含义，我建议您先阅读一些材料，例如


反应生命周期组件
enter link description here
状态与道具
enter link description here