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

Posted

技术标签:

【中文标题】如何将 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 年以上的几十个网格之后,我真的可以说这是一堆 **** :)。但是如果你不需要做太多事情就可以了。

以上是关于如何将 React 元素转换为 Html 元素?的主要内容,如果未能解决你的问题,请参考以下文章

将 jquery 元素转换为 html 元素

HTML中 块级元素 如何转为 行内元素??

如何响应 React 中自动调整大小的 DOM 元素的宽度?

如何获取html元素的宽度并将像素转换为百分比[关闭]

如何在 Next JS 应用程序中将字符串转换为 HTML 元素?

React - 如何以 JSON 格式返回 HTML 元素