Javascript 有没有办法在构建之前将react组件编译成html？

我有一个函数，它接受dom元素并对它们进行操作。它被称为

pageTransition

，它需要两个

div

元素，并执行从一个元素到另一个元素的转换动画

function pageTransition(div1, div2){//do the transition}

例如，我可以像这样调用这个函数

pageTransition (document.body.querySelector("#div1"), document.body.querySelector("#div2"))

这很简单，但假设我想将

React类组件

传递为我的

div

元素。这是不可能的，因为react组件是类的而不是html元素。一个快速提醒，这个react组件最终将在构建期间编译成包含一些内容的

div

元素。我知道我可以通过这样做来解决这个问题

...//the react class
render(
    return (
        <div id="div1">...</div>//this will allow me to call the above function with the same parameters
    )
).

..//react类
渲染(
返回(
…//这将允许我使用相同的参数调用上述函数
)
).

---

但是我只是想知道是否有一种神奇的方法可以在构建时之前编译这个react类，所以我不想给返回的div提供id，而是想知道我是否可以像这样做

pageTransition（compile（reactClass），compile（reactClass））
解决方案将取决于页面转换的预期目的

但是，您可能需要研究三个潜在选项：

将React组件静态呈现为html标记或字符串：
在html中呈现两个div元素，并使用React门户管理这些div中呈现的内容。这可能会取代您在pageTransition中所做的工作
使用ref访问从React组件生成的DOM元素：
如果您解释一下pageTransition的作用，它可能会帮助我为您找到解决方案。
谢谢，您向我介绍了一些我不知道的概念，以及解决我问题的方法，