从多级嵌套对象数组 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 版本。

请注意，只有在有子项时才会调用递归调用。

 const data = [

  {

    "tag": "div",

    "children": [

      {

        "tag": "p",

        "text": "hey",

        "style": {

          "color": "red",

          "fontSize": "12px"

        }

      }

     ]

   },

   {

    "tag": "div",

    "text": "Yo"

  }

 ];

const Elements = ({elements}) => {

    return (

      <React.Fragment>

         {elements && elements.map(element => {

            let {tag, text, children, style} = element

            if(tag === "div") {

                 return(

                    <div style={style ? style: {}}>{text}

                       {children && <Elements elements={children}/>}

                     </div>

                   )

             } else if(tag === "p") {

                 return(

                    <p style={style ? style: {}}>{text}

                       {children && <Elements elements={children}/>}

                   </p>

                  )

            } 

        })}

     </React.Fragment>

);}

function render() {

  ReactDOM.render(<Elements elements={data} />, document.getElementById("root"));

}

render();