如何不将“React Component”渲染到 DOM答案

【问题标题】：How to render `React Component` not to the DOM如何不将“React Component”渲染到 DOM
【发布时间】：2019-01-17 18:30:19
【问题描述】：

假设我想即时渲染 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 元素；我的意思是，好的框架应该有办法做到这一点

【问题讨论】：

【解决方案1】：

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

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

现在你有了Card无状态组件的内容，渲染在preRender变量中

【讨论】：

【解决方案2】：

render 返回组件实例而不是 DOM。正如ReactDOM.renderdocumentation 所说，

在提供的容器中将 React 元素渲染到 DOM 中，然后返回对组件的引用（或为无状态返回 null 组件）。

如果 React 元素之前被渲染到容器中，这将对其执行更新并仅根据需要更改 DOM 反映最新的 React 元素。

如果提供了可选的回调，它将在组件被渲染或更新。

DOM 被渲染到提供的容器元素：

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

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

【讨论】：