React - 从 JSON 渲染 HTML答案

【问题标题】：React - Render HTML from JSONReact - 从 JSON 渲染 HTML
【发布时间】：2016-10-07 03:42:43
【问题描述】：

我正在尝试将来自 JSON 的 HTML 渲染到我的 React 组件中。我知道危险的SetInnerHTML 并且不打算使用它，因为我想在呈现的 HTML 中利用其他 React 组件。目前，只要关闭标签，我就可以渲染任何元素。但情况并非如此，因为如果我想将多个元素或 img 标签放在一个 div 中，我需要它保持打开状态，直到所有 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

【问题讨论】：

React 不渲染 HTML，它渲染 DOM 元素。您要么需要构建 HTML 并将其作为字符串注入，要么以编程方式构建元素；您采用的方法不是 React 方式。也许您应该说明您要解决的问题，我们可以为您提供一种更 Reactish 的方式来做事。
我正在开发一个 HTML 编辑器。我需要能够在页面上添加和存储每个元素。

标签： javascript html json reactjs

【解决方案1】：

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

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

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

元素树本身就是数据。与其尝试发明一种数据结构来表示一个，不如使用 JSX。

【讨论】：

“多余的额外”是多余的
我需要将开始标签和结束标签分开，这样我可以在标签之间插入元素
您也可以在打开和关闭标签之间使用 JSX 变量。

【解决方案2】：

closing tag 不正确。

检查以下小提琴。

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

希望对你有帮助！

【讨论】：

【解决方案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>
  }
})

【讨论】：