如何将 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 元素?的主要内容,如果未能解决你的问题,请参考以下文章
如何响应 React 中自动调整大小的 DOM 元素的宽度?