React: How to concatenate string with JSX

Question

I'm trying to take a server response which contains HTML and replace parts of it with React components. The html from the server looks something like this:

<div><h1>Title</h1>[video] [image]</div>

I would like to replace [video] and [image] with React components which display a video player and an image. In reality the components are a little more complex but this should show a simple example.

I've set up a code pen but so far have only been able to get this output as I'm combining React components with strings.

Title
[object Object] [object Object]

https://codepen.io/adamoliver/pen/pRYXeB

Any ideas on what a potential solution might be for this?

Answer 1

您将需要使用类似https://github.com/babel/babel-standalone之类的工具来即时编译JSX。

Answer 2

Since someone hsa suggested, you should check out https://facebook.github.io/react/docs/react-dom-server.html#rendertostring

I think the right way to handle this case is to convert a piece of string into an JSX element, which in internally objects returned from React.createElement() , described at https://facebook.github.io/react/docs/react-without-jsx.html

Answer 3

You need to use this as a function call instead of component. Find this codepen.

 `https://codepen.io/satya-dash/pen/QdPwep`