雖然 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 的 混用，讓人歎為觀止。