React.js 组件子元素到 DOM 元素

Question

I am trying to create my own Map component and one of the tasks is to create custom Map Annotation. This is how it looks like a MapAnnotation component in the render function

<MapAnnotation title='Annotation' latitude={ 12.345678 } longitude={ 12.345678 }>
        <div style={{width: '100px', height: '100px', backgroundColor: 'lightblue'}} />
</MapAnnotation>

The method that converts MapAnnotation component into the map object is pretty simple:

createAnnotation(child) {
    const { latitude, longitude, title } = child.props
    var coordinate = new global.mapkit.Coordinate(latitude, longitude)
        
    if ('children' in child.props) {
        var newAnnotation = new global.mapkit.Annotation(coordinate, function(coordinate, options) {
            var domElement = 
            return ReactDOMServer.renderToString(<div>{child.props.children}</div>)
        }, { title: title })
        return newAnnotation
    } else {
        var newAnnotation = new global.mapkit.MarkerAnnotation(coordinate, { title: title })
        return newAnnotation
    }
}

Unfortunately, I do not know how to return the DOM element from children that exist in MapAnnotation. Right now I am getting the error:

Error: [MapKit] Annotation element factory must return a DOM element, got <div data-reactroot=""><div style="width:100px;height:100px;background-color:lightblue"></div></div> instead.

I am the React.js beginner and most of my knowledge I have from ReactNative. This is the reason why I do not know what is the keyword to find the solution with Uncle Google.

I will be glad for help :)

Answer 1

The solution based on Boykov answer:

var domElement = document.createElement("div")
domElement.innerHTML = ReactDOMServer.renderToString(child.props.children)
return domElement

Answer 2

I think I can do it using useRef.

import react,{useRef, useEffect} from 'react';

const Test = ({book_id, chart_id, title, data_source}) => {
  const refCom = useRef(null);

  useEffect(() => {
    if (refCom && refCom?.current) {
      //Run the code you want to do inside.
      console.log(refCom.current);
    }
  }, [refCom]);
  return (<div ref={refCom}>....</div>)