我正在使用Electron开发Node JS应用，并使用React渲染UI。 只需简单地，用户在UI左侧的文字处理器组件中输入打印命令，然后React交互这些命令，并在UI右侧实时呈现连接到这些命令的内容。 例如，在坐标X1，Y1处渲染文本“ X”。通过在用户输入新命令时触发状态变化并使用draw（）更新命令的渲染视图，可以很容易地呈现这种命令。但是，当（1）给定的命令坐标不是绝对的，而是相对于先前的命令渲染组件，并且（2）关系组件的大小未知时，我很难确定处理问题的最佳方法可以确定而无需先渲染它（通常它包含具有各种字体和字体大小以及变化的字符内容的文本）。我正在尝试找出实现draw（）调用的最佳方法，该方法将为我提供准确渲染的图像，而无需为静态和动态定位的组件添加不必要的绘制命令。
我曾考虑过使用javascript将未知的关系组件直接插入DOM中，找到大小并将其保存以进行渲染，然后隐藏/删除它们，但是意识到使用React时这是不好的做法，因为混淆了真实状态的DOM。 我搜索了这个问题，并在StackOverflow（Get the height of a Component in React）上找到了该主题，该主题讨论了将ref变量用作回调，以便在知道大小后重新呈现UI。但是，我不确定该解决方案是否过时（此职位已经使用3年了），或者对于我的用例而言，这是否是一个实用的解决方案，因为随着用户输入输入，右侧的呈现视图不断变化。在用户界面的命令端，而不是在页面加载时呈现一次。
我对React还是比较陌生，希望我不要因为无知而忽视一个简单的答案。任何对如何处理和解决此问题的理论的见解将不胜感激！