How can I convert React Element to Html element?

Question

Now I've using ag-Grid that can create custom renderer for each data cells but it's required Html elements

For example they're an Elements that can be created by calling document.createElement()

But I want to use React element as custom renderer for my convenient

Don't sure that I can do that or not ?

Answer 1

You can try to use getDOMNode for example: this.refs.giraffe.getDOMNode() , or:

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

But that way has some deprecation issues, more here: React.js: The difference between findDOMNode and getDOMNode

Answer 2

There's a new React way in ag-grid for this purpose. It's quite recent so you have to update your ag-grid module. Instead of using cellRenderer use cellRendererFactory to which you can pass React component directly. Source: https://www.ag-grid.com/javascript-grid-cell-rendering-components/#react-cell-rendering