javascript - Pass react component inside dangerouslySetInnerHTML - Stack Overflow

The server returns something like:

content = <p> Hello world :smile: <strong> NICE </strong> !</p> - this is because we support markdown.

Now I have a parser that parses everything with :{text}: into an emoji. I am using emoji-mart for this one.

So this is what content looks like now:

<p> Hello world ${<Emoji emoji=":smile:" />} <strong> NICE </strong> !</p>

Currently without the emoji parser what we do is:

return React.createElement('div', { 
   dangerouslySetInnerHTML: {
    __html: content,
  }
});

However, since we now concatenating the content to contain the Emoji from emoji-mart how will I pass this to dangerouslySetInnerHTML without breaking the markdown?

The server returns something like:

content = <p> Hello world :smile: <strong> NICE </strong> !</p> - this is because we support markdown.

Now I have a parser that parses everything with :{text}: into an emoji. I am using emoji-mart for this one.

So this is what content looks like now:

<p> Hello world ${<Emoji emoji=":smile:" />} <strong> NICE </strong> !</p>

Currently without the emoji parser what we do is:

return React.createElement('div', { 
   dangerouslySetInnerHTML: {
    __html: content,
  }
});

However, since we now concatenating the content to contain the Emoji from emoji-mart how will I pass this to dangerouslySetInnerHTML without breaking the markdown?

• javascript
• reactjs

Share Improve this question Follow asked Jul 5, 2018 at 7:59 I am LI am L 4,66266 gold badges3737 silver badges5454 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Upon playing around with the situation I discovered that you can actually pass use functional ponents and return string instead: https://github./missive/emoji-mart#using-with-dangerouslysetinnerhtml (Specific for my problem regarding emoji-mart)

So what I did with my other Components are the same, instead of calling a React ponent I created a function instead:

function testComponent(props) {
  const { style, className, children, html } = props;

  if (html) {
    return `<span style='${style}'  class='${className}'>${children || ''}</span>`;
  }

  return (
    <span style="${style}" class="${className}">
      ${children || ''}
    </span>
  );
}

And called it as:

function testComponent(props) {
  const { content } = props; // content is a markdown and can be a stringified image tag

  return testComponent({ children: content, html: true });
}

And for the dangerouslySetInnerHTML:

(render function inside of your react ponent)

render() {
    const props = {
      dangerouslySetInnerHTML: {
        __html: testComponent(this.props.content),
      },
    };

    return React.createElement('div', props);

}

This is hackier, but less expensive than using:

renderToString()
renderToStaticMarkup()

You should use React.renderToStaticMarkup(JSXInstance), in your case:

<p> Hello world ${React.renderToStaticMarkup(<Emoji emoji=":smile:" />)} <strong> NICE </strong> !</p>