如何将“ React Component”呈现给DOM

Question

可以说我想动态渲染React组件并获得真正的DOM元素以备将来使用

例如，如果我有该组件：

 function Card({symbol,id,color}){
  return <my-card symbol={} id={} color={color}></my-card>
 }

我如何渲染它并获得元素？

也许那样

 const cardElement = React.render(<Card symbol='4' id=111 color='♥'/>)

我需要真正的元素来玩耍。 做一些测量。 然后将其删除。

但是我认为，框架通常需要某种方法让开发人员在需要时拥有真正的DOM元素。 我的意思是，好的框架应该可以做到这一点

Answer 1

为什么不使用这样的东西：

const preRender = () => <Card symbol='4' id=111 color='♥'/>

现在，您有了Card无状态组件的内容，该组件在preRender变量中呈现

Answer 2

render返回组件实例而不是DOM。 如ReactDOM.render 文档所述，

将React元素呈现到提供的容器中的DOM中，并返回对该组件的引用（或对于无状态组件返回null）。

如果以前将React元素渲染到容器中，它将对它进行更新，并且仅在必要时才更改DOM以反映最新的React元素。

如果提供了可选的回调，它将在呈现或更新组件之后执行。

DOM呈现到提供的容器元素：

const element = document.createElement('div');
ReactDOM.render(<Card ... />, element);
console.log(element.outerHTML);

如果组件是异步的，则应使用回调来检索对DOM的异步更新。