react-bootstrap-table2展开行key属性错误及属性值显示异常问询

1. 展开行里的每个<p>标签是否需要key属性？必须要！ #

你碰到的Each child in a list should have a unique "key" prop警告，是React渲染列表时的核心要求——所有通过map()生成的列表子元素，都得带上唯一的key属性。

原因很直白：React靠key来识别每个列表项的“身份”，当列表发生更新（比如增删、排序）时，它能精准判断哪些元素需要重新渲染、哪些可以复用，既提升渲染效率，又能避免因元素身份混乱引发的错误。

回到你的代码，Object.keys(row._source.attrs).sort().map(...)生成了一组<p>标签，完全属于“列表渲染”场景，所以必须给每个<p>加key。因为cell是对象的键（比如call-id），本身就是唯一的，直接用它当key就很合适：

<p key={cell} value={row._source.attrs[cell]}>
  {/* 其余内容保持不变 */}
</p>

加上之后，那个烦人的警告就会消失啦。

2. <p>标签的value属性只显示属性名，不显示对应值？这是标签属性的特性问题！ #

问题出在<p>标签本身——<p>是普通文本块元素，它并不支持value属性。value是专门为表单控件（比如<input>、<select>）设计的属性，浏览器不会把<p>的value当作可显示内容，只会把它当作自定义属性存在DOM里，但不会渲染出来。

你已经通过<span className="red">{row._source.attrs[cell]}</span>正确显示了值，这部分是没问题的。如果只是想把值作为属性存起来（方便后续JS读取），建议用HTML标准自定义属性data-*，把value改成data-value：

<p key={cell} data-value={row._source.attrs[cell]}>
  {/* 其余内容保持不变 */}
</p>

这样生成的HTML会变成<p data-value="5147447D-..." ...>，既符合规范，又能通过element.dataset.value轻松读取到值，完美解决属性存值的需求。

内容的提问来源于stack exchange，提问作者13Akaren