react使用link跳转传递参数_修复 React 代码中烦人的 Warning

缺少 Key

img

react官方文档是这样描述key的：

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

react的diff算法是把key当成唯一id然后比对组件的value来确定是否需要更新的，所以如果没有key，react将不会知道该如何更新组件。你不传 key 也能用是因为 react 检测到子组件没有 key 后，会默认将数组的索引作为 key。react根据key来决定是销毁重新创建组件还是更新组件，原则是：

• key相同，组件有所变化，react会只更新组件对应变化的属性。
• key不同，组件会销毁之前的组件，将整个组件重新渲染。

重复 Key

warning

img

从上面提到的 key 的作用可以知道，如果出现两个相同的 key，则渲染可能出现异常。

错误案例：

img

常见的错误是，在使用 antd 的 table 组件时，每个列的 dataIndex 属性同时也会作为 key，注意两个列的 dataIndex 不要相同。

P 标签包含内联元素

warning

img

在 HTML5 中，标准制定者重新定义了HTML元素的分类，并根据这一新的分类定义了元素的内容模型(Content Model) -- 对于一个元素而言，哪些子元素是合法的，而哪些子元素是非法的。需要注意的是，HTML5中的这种元素分类与inline、block没有任何关系，任何元素都可以在CSS中被定义为display:inline或者display:block。另外，除了这7大分类，还存在一些较小的分类，如Palpable、Script-Supporting等。

img

Metadata

顾名思