React初识-在数组中添加 html 元素

虽然 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 的 混用,让人叹为观止。

猜你喜欢

转载自blog.csdn.net/wsh2467991332/article/details/83793061