如何将 React 元素转换为 Html 元素？

Posted 2023-03-05

【中文标题】如何将 React 元素转换为 Html 元素？

【英文标题】：How can I convert React Element to Html element?

【发布时间】：2016-11-08 08:45:36

【问题描述】：

现在我使用了 ag-Grid，它可以为每个数据单元格创建自定义渲染器，但它需要 html 元素

例如它们是可以通过调用 document.createElement() 来创建的元素

但为了方便，我想使用 React 元素作为自定义渲染器

不确定我能不能做到这一点？

【问题讨论】：

如果我没看错的话，你会创建一个像这样的自定义单元格渲染器：cellRenderer: reactCellRendererFactory(MyCustomCellRenderer)，对吧？而你的问题是，是否可以在 MyCustomCellRenderer 组件的 render 方法返回的 jsx 中使用 React 组件？

@Smilev，这正是我想知道的。至少，在cell渲染器的功能版本中似乎做不到，在cellRenderer的组件形式中可以做到吗？

【参考方案1】：

您可以尝试使用getDOMNode 例如：this.refs.giraffe.getDOMNode()，或者：

import ReactDOM from 'react-dom';
...
const submitBtn = ReactDOM.findDOMNode(this.refs.submitButton)

但这种方式存在一些弃用问题，更多信息请参见：React.js: The difference between findDOMNode and getDOMNode

【参考方案2】：

为此目的，在 ag-grid 中有一种新的 React 方式。它是最近的，所以你必须更新你的 ag-grid 模块。不要使用cellRenderer，而是使用cellRendererFactory，您可以直接将React 组件传递给它。来源：https://www.ag-grid.com/javascript-grid-cell-rendering-components/#react-cell-rendering

【讨论】：

这似乎不再存在于文档中？这还有可能吗？

新网址：ag-grid.com/javascript-grid-cell-rendering-components/…

是的，它仍然是可能的。请注意，如果您有很多行，这可能会严重影响性能。在用 AG 做了 1 年以上的几十个网格之后，我真的可以说这是一堆 **** :)。但是如果你不需要做太多事情就可以了。