淺瞭解:react為何需要設定唯一key值(antd-table)

來源:互聯網
上載者:User

標籤:code   target   地方   等等   ref   規範.   資料   gre   組件   

一、React規範

1.1 react key的作用
當渲染重複資料的時候, React.diff會根據產生的key進行虛擬DOM渲染, 所以我們需要在遍曆的地方都要加上key,例如map、for等等

同樣, antd作為react的UI組件庫, 有些地方也需要遵循react的key規範.例如 antd-table 在渲染前要求: 在 Table 中,dataSource 和 columns 裡的資料值都需要指定 key 值。對於 dataSource 預設將每列資料的 key 屬性作為唯一的標識。

1.2 react key缺失

如果你的資料沒有這個屬性,務必使用 rowKey 來指定資料列的主鍵。若沒有指定,控制台會出現以下的提示,表格組件也會出現各類奇怪的錯誤。

Each record in table should have a unique key prop,or set rowKey to an unique primary key.

雖然只是一個警告,但是這個會給頁面table表格帶來無法預測的錯誤

1.3 react key相同

這種情況感覺到的錯誤會比較明顯:因為你在一個列上的操作,在相同key上的列也會響應!

當滑鼠滑過其中一個列並高亮的時候, 另一個列也會被高亮

二、添加Key值
我們知道了為什麼添加key, 以及不添加key值會出現什麼情況

2.1 完善 dataSourcecolumns

每一行(dataSource)和每一列(columns)都應該要有一個唯一key值, 渲染的時候react才能準確知道是否需要修改.

let columns = [{    key: ‘1‘,    title: ‘歌曲名字‘,    dataIndex: ‘title‘}]let dataSource = [{    key: 1,    title: ‘啞巴‘}]<Table    columns={columns}    dataSource={dataSource}/>

2.2 直接在table上加上每一列key值: rowKey

但是注意: 這個key也是要求唯一的

<Table    rowKey={(record, index) => `complete${record.id}${index}`}    .../>

具體的可以查看官方文檔: 《antd-table》

淺瞭解:react為何需要設定唯一key值(antd-table)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.