Should I use ReactDOMServer.renderToString() or any other way to render a react component to a string?

Question

I am extacting a tiny component from a bigger map component on an app using Leafet and it seems impossible to include the JSX into the html string of Leafet DivIcon.

bigger map component render part:

render () {
  const {tobject, strings} = this.props

  let circle = classes.redCircle

  if (tobject.lastPoint.activeEvents.ignition) {
    circle = classes.greenCircle
  }

  const icon = new window. L. DivIcon({
  html:
  ` <div class= ${classes.tobjecticon}><span class= ${classes.tobjecticontext}><div class= ${circle}></div></span></div> `
})

newly extacted component StatusCircle.js:

import React from 'react'
import classes from './StatusCircle.scss'

export const StatusCircle = ({ status}) => {

  let circle = classes.redCircle

  if (status) {
    circle = classes.greenCircle
  }

  return (
    <div className={circle} ></div>
  )
}

export default StatusCircle

My question seems similar to this one. I've tried renderToString() of StatusCircle, but using ReactDOM (deprecated there) and not ReactDOMServer and it didn't work saying there is no such function. Is it okay to use ReactDOMServer.renderToString() or .renderToStaticMarkup() to achieve this or is it better to leave unchanged without extraction?

score 3 · Accepted Answer · answered Jul 14 '17 at 20:27

It is OK to leave inner html inside of parent component. But here is the way to render it to markup without using ReactDOMServer. It's a bit tricky way =)

class Inner extends React.Component {
  render () {
    return (
      <span {...this.props}>Inner Element</span>
    )
  }
}

class Outer extends React.Component {
  render () {    
    const span = document.createElement('span');
    ReactDOM.render(<Inner className="red" />, span);    
    
    //target html
    console.log(span.innerHTML);
    
    return (
      <div>
        You can use this html
        <pre>
          {span.innerHTML}
        </pre>    
      </div>
    )
  }
}

ReactDOM.render(<Outer />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Warning: _renderNewRootComponent(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of StatusCircle. <- I get this warning when I use renderDOM inside the render (), otherwise it is giving the expected results — krankuba, Jul 16 '17 at 12:00

krankuba · Answer 2 · 2017-07-16T15:28:14.313

I don't want to add more imports to the project and depend on them, but using ReactDOM.Render instide render () is giving: "Warning: _renderNewRootComponent(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of StatusCircle". While ReactDOMServer.renderToStaticMarkup() works flawlessly like this:

class App extends React.Component{
  render() {

    let greenCircle = ReactDOMServer.renderToStaticMarkup(<StatusCircle status={true} />)
    console.log(greenCircle)
    let redCircle = ReactDOMServer.renderToStaticMarkup(<StatusCircle status={false} />)
    console.log(redCircle)

    return (
        <div>
          <StatusCircle status={true} />
          <StatusCircle status={false} />
        </div>
    )
  }
}

const StatusCircle = ({status}) => {

  let circle = "redCircle"

  if (status) {
    circle = "greenCircle"
  }

  return <div className={circle}></div>
}

ReactDOM.render(<App />, document.querySelector('#root'))

.redCircle {
  background-color: red;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  margin: 10px;
}

.greenCircle {
  background-color: green;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom-server.min.js"></script>
<div id="root"></div>

Should I use ReactDOMServer.renderToString() or any other way to render a react component to a string?

2 Answers2

Linked