Used to Element UI, ANT UI was difficult to use, the documentation was not very friendly, and some of the examples were a bit problematic. Ant Design Mobile’s Tabs use index as the Tab key value, and the official example is fine. But with custom keys, emmmm.

If you skip the example and go straight to the API, there is only one mention of key, as follows:

Nowhere else does it say how to set the key. And then I started to look at the example, and fortunately, there’s an example where the key is used as a TAB property when you define a TAB. As follows:

const tabs = [
  { title: '1 Tab', key: 't1' },
  { title: '2 Tab', key: 't2' },
  { title: '3 Tab', key: 't3' },
];
Copy the code

Ok, I thought that was it, but when I switch to TAB, I don’t switch… Then he began to compare the examples to see where he had missed them. Then I thought, the reason for not switching may be the content and the key value does not correspond, online check, good boy, need to set the content key value, as follows:

<div key="t1"></div>
<div key="t2"></div>
<div key="t3"></div>
Copy the code

This is done, but the official example is not set.