Как из React компоненты получить строку?

Question

[wqqe]

Допустим у меня есть компонента

const Main = () => {
  return (
    <div className='main'>
      <div style={{ backgroundColor: 'red' }}>
        <h1 className='main__header'>Hello world</h1>
      </div>
      <button type='button' onClick={handleClick}>
        press me
      </button>
    </div>
  )
}

Мне нужен такой парсер, который бы принимал <Main/>, как то так:
какойТоПарсер(<Main/>, доп. опции)
а возращал строку:

"<div className='main'>
      <div style={{ backgroundColor: 'red' }}>
        <h1 className='main__header'>Hello world</h1>
      </div>
      <button type='button' onClick={handleClick}>
        press me
      </button>
    </div>"

Именно строку, а не html, это важно
Я облазил весь инет, и не нашел ничего, что могло бы мне помочь

Comments

[WbICHA]

Эммм... Как вы искали? Первый же результат react element as string.
https://stackoverflow.com/questions/34114679/conve...

[wqqe]

WbICHA, Спасибо, но это не то что нужно)
Я же написал, мне нужно получить строку из компоненты.
Например я передам функции reactElementToJSXString(<div className='lalala'> Hello world </div>), и мне вернет она '<div className='lalala'> Hello world </div>' Как бы все хорошо, но нет. Так как если я передаю компоненту <Main/> допустим. Функция мне возращает просто строку '<Main/>".

[WbICHA]

wqqe, я понял, ответы читать мы не умеем.

Answer 1

[ParaBellum577]

Вот, то, что вы ищите https://ru.reactjs.org/docs/react-dom-server.html