Rendering React components from strings

Question

I am trying to create a single-page app blog using React. I want to store my blog posts in a database. Typically, you can just store a blog post in the database as html and render it into a page, but I can't think of how to get that to work for React. Here is some code showing roughly what I want to do:

class BlogPost extends React.Component {
  componentDidMount() {
    // pretend this string comes from the server
    // and MyCustomTextField is defined elsewhere
    var blogPostString = "<MyCustomTextField content="some content" />";
    // render the react components into the page
    ReactDOM.render(blogPostString, this.refs.someRef);
  }

  render() {
    return (
      <div ref="someRef"></div>
    );
  }
}

Obviously this doesn't work since it would need to be converted from jsx, but I was wondering if there is a way to do something along these lines, or how else you would recommend doing it.

Another option I thought of is to store the blog post as an array of JSON objects where each entry includes the name of the component and its attributes, then creating them from the name similarly to this with a lookup table for the name to component mapping.

Ultimately I feel like none of the ideas I've come up with are ideal, so any suggestions for how to do this would be appreciated.

Your blog posts would be pure html, which will not not have any React components. It may also be malformed. A better way would be to simply store it in server as it is and then render it using inner html inside a wrapper div. — hazardous
– hazardous, Commented Jan 21, 2016 at 10:48
Yeah, I wanted to know if it was possible to do it this way since there may be javascript that needs to run too, not just pure HTML. I can get the HTML part by using ReactDOMServer.renderToString and dangerouslySetInnerHTML, but that doesn't give me any javascript — zxcvb
– zxcvb, Commented Jan 21, 2016 at 17:16
Inserting script is quite dangerous. You sure you wanna do that? Anyways, you can always get the mounted element using a ref and then set its innerHTML, you would still need to parse and run any referenced/inlined scripts. — hazardous
– hazardous, Commented Jan 22, 2016 at 8:49
What is the danger if the script is sent from the server and cannot be updated? Isn't that equivalent to any other Javascript the server sends over, like a normal script tag? — zxcvb
– zxcvb, Commented Jan 23, 2016 at 0:49

Dhaval Patel · Accepted Answer · 2016-01-21 07:42:28Z

0

You can directly render the MyCustomTextField in render method like

 render() {
    return (
      <div ref="someRef">
       <MyCustomTextField content="some content" />
      </div>
    );
  }

Demo

edited Jan 21, 2016 at 7:42

answered Jan 21, 2016 at 7:33

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zxcvb Over a year ago

Hey, sorry if I wasn't clear, but the point is that all I would have is the string "<MyCustomTextField content="some content" />" loaded from the server, so I can't just render it like this

Gezim Over a year ago

Did you find a solution this @zxcvb?

zxcvb Over a year ago

I did come up with an option, although it's slightly convoluted and still not ideal, I'll detail it in an answer to the question

Collectives™ on Stack Overflow

Rendering React components from strings

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related