Question

我正在尝试将JSON中的HTML呈现到我的React组件中。我知道危险的SetInnerHTML，我不打算使用它，因为我想利用渲染的HTML内部的其他React组件。目前，只要我关闭标签，我就可以渲染任何元素。但事实并非如此，因为如果我想在div中放置多个元素或img标签，我将需要它保持打开直到所有img标签都已完成。我将不胜感激任何帮助。感谢

  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错误

 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

数据结构冗余;你可以这样做：

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

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

元素树本身就是数据。而不是试图发明一个数据结构来表示一个，只需使用JSX。

Answer 2

closing tag不合适。

检查以下小提琴。

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

希望它有所帮助！

Answer 3

我认为@pranesh回答正确。它必须像这样

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>
  }
})

React - 从JSON渲染HTML

3 个答案: