javascript - React - 从 JSON 渲染 HTML

Question

我正在尝试将 HTML 从 JSON 渲染到我的 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>
    )
  }

网络包错误

 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。