React初識-在陣列中新增 html 元素
阿新 • • 發佈:2019-02-02
雖然 React 看了有一段時間了,但是親自嘗試的時候還是有點惶恐。
要求:服務端返回陣列,客戶端需將陣列展示在客戶端
<div className={styleSer.testPicConTwo}>
{
this.getInterfaceInfo.call(this, InterfaceInfo)
}
</div>
要求 getInterfaceInfo 函式返回一個 div ,div 中 P 標籤的個數根據陣列的內容而定。
假設陣列如下:
InterfaceInfo: [ ['佔用', '未知', '未佔用', '為佔用', '佔用', '佔用', '未知'], ['佔用', '未佔用', '未佔用', '佔用', '佔用', '佔用', '佔用'], ['未佔用', '佔用', '佔用', '佔用', '佔用', '佔用', '佔用'], ]
函式如下:
getInterfaceInfo(InterfaceInfoList){ let list = []; InterfaceInfoList.forEach(function (item) { let p = <p>【{item.join(', ')}】</p>; list.push(p); }); return <div>{list}</div>; }
可以看到直接在陣列中插入 P 標籤和字串模板即可。返回的是展開的元素。
感覺這樣的 html 和 js 的 混用,讓人歎為觀止。