第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

從多級嵌套對象數(shù)組 reactjs 創(chuàng)建嵌套的 JSX 元素

從多級嵌套對象數(shù)組 reactjs 創(chuàng)建嵌套的 JSX 元素

我有以下 JSON 結(jié)構(gòu)，我需要將其轉(zhuǎn)換為等效的 JSX 元素結(jié)構(gòu)。標(biāo)簽可以是任意的，也可以無限嵌套。[  {    "tag": "div",    "children": [      {        "tag": "p",        "text": "hey",        "style": {          "color": "red",          "fontSize": "12px"        }      }    ]  },  {    "tag": "div",    "text": "Yo"  }]應(yīng)該呈現(xiàn)為<div>  <p     style={{       color: 'red',      fontSize: '12px'    }}>hey</p></div><div>Yo</div>
查看完整描述

3 回答

?
白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗 獲得超10個贊

這是一個 JSX 版本。


請注意，只有在有子項時才會調(diào)用遞歸調(diào)用。


 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();


查看完整回答
反對 回復(fù) 2021-10-14
  • 3 回答
  • 0 關(guān)注
  • 274 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號