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