React-从JSON渲染HTML

Question

I am trying to render HTML from JSON into my React component. I am aware of the dangerouslySetInnerHTML and am not looking to use that as I would like to leverage other React components inside of the rendered HTML. Currently I can render any element as long as I close the tag. But this is not the case as in if I would like to put multiple elements or img tags in a div i would need it to remain open until all of the img tags have completed. I would appreciate any help on this. Thanks

  render(){
    var data = [
      {
        type: 'div',
        open: true,
        id: 1,
        className: 'col-md-12 test',
        value: ''
      },
      {
        type: 'div',
        open: false,
        id: 1
      }
    ]
    var elements = data.map(function(element){
      if(element.open){
        return <element.type className={element.className}>
      } else {
        return </element.type>
      }
    })
    return (
      <div>
        {elements}
      </div>
    )
  }

webpack error

 3 |         return <element.type className={element.className}>
   34 |       } else {
> 35 |         return </element.type>
     |         ^
  36 |       }
  37 |     })
  38 |     return (

 @ ./src/index.js 9:11-38

Answer 1

The data structure is redundant; you can simply do this:

render() {
  var elements = (
    <div id='1' className='col-md-12 test'></div>
  );

  return (
    <div>{elements}</div>
  );
}

Element trees themselves are just data. Rather than trying to invent a data structure to represent one, just use JSX.

Answer 2

The closing tag wasn't proper.

check the following fiddle.

https://jsfiddle.net/pranesh_ravi/mLoL6pzz/

Hope it helps!

Answer 3

I think @pranesh answered right. It has to go something like this

var elements = data.map(function(element){
  if(element.open){
    return <element.type className ={element.className}>Sample</element.type>
  } else {
    return <element.type>Sample</element.type>
  }
})