从多级嵌套对象数组 reactjs 创建嵌套的 JSX 元素

Question

我有以下 JSON 结构，我需要将其转换为等效的 JSX 元素结构。标签可以是任意的，也可以无限嵌套。

[

  {

    "tag": "div",

    "children": [

      {

        "tag": "p",

        "text": "hey",

        "style": {

          "color": "red",

          "fontSize": "12px"

        }

      }

    ]

  },

  {

    "tag": "div",

    "text": "Yo"

  }

]

应该呈现为

<div>

  <p 

    style={{ 

      color: 'red',

      fontSize: '12px'

    }}>hey</p>

</div>

<div>Yo</div>

Answer 1

这是一个 JSX 版本。请注意，只有在有子项时才会调用递归调用。&nbsp;const data = [&nbsp; {&nbsp; &nbsp; "tag": "div",&nbsp; &nbsp; "children": [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "tag": "p",&nbsp; &nbsp; &nbsp; &nbsp; "text": "hey",&nbsp; &nbsp; &nbsp; &nbsp; "style": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "color": "red",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "fontSize": "12px"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;]&nbsp; &nbsp;},&nbsp; &nbsp;{&nbsp; &nbsp; "tag": "div",&nbsp; &nbsp; "text": "Yo"&nbsp; }&nbsp;];const Elements = ({elements}) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{elements && elements.map(element => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let {tag, text, children, style} = element&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(tag === "div") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style={style ? style: {}}>{text}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{children && <Elements elements={children}/>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else if(tag === "p") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style={style ? style: {}}>{text}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{children && <Elements elements={children}/>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp;</React.Fragment>);}function render() {&nbsp; ReactDOM.render(<Elements elements={data} />, document.getElementById("root"));}render();