React开发传key后仍出现Tabs`key` is not a prop警告如何解决

问题根因 #

React 中的 key 是框架内部用于列表 Diff 优化的保留属性，不会作为普通 Props 传递给自定义组件。如果你的 Tabs 组件逻辑中尝试通过 tabItem.props.key 读取每个 Tab 子元素的 key 值，就会触发该警告，且读取到的结果必然为 undefined。

解决步骤 #

1. 先修正命名冲突问题
   你的 Tab.js 中组件名错误写为 Tabs，和外层 Tabs 组件重名，先修正该问题：

// Tab.js 修正后代码
import React from "react";

const Tab = ({ title, hidden }) => {
  return <li className={hidden ? 'hidden':'not-hidden'}>{title}</li>;
};

export default Tab;

2. 替换key为自定义属性传递
   如果你需要在 Tabs 组件内部使用原来的 key 对应的值，不要使用 key 这个保留字段，额外传递一个自定义属性（示例用tabId）即可：

// App.js 调用代码修正
<Tabs>
  {data.reduce((result, tabItem, tabIndex) => {
    // 除了React保留的key，额外传自定义属性tabId供Tabs内部使用
    result.push(<Tab {...getTabItemProps(tabItem, tabIndex)} key={tabIndex} tabId={tabIndex}/>);
    return result;
  }, [])}
</Tabs>

之后在 Tabs 组件中读取子元素的 tabItem.props.tabId 即可，不要读取key，警告就会消失。

可选项：简化代码 #

你当前代码中用reduce仅做遍历返回数组的逻辑，可以直接用map简化，写法更清晰：

// App.js 遍历简化
<Tabs>
  {data.map((tabItem, tabIndex) => (
    <Tab {...getTabItemProps(tabItem, tabIndex)} key={tabIndex} tabId={tabIndex}/>
  ))}
</Tabs>

// Tabs.js 列表渲染简化
<ul className="rc64nav" ref={tabsRef}>
  {tabsVisible.map((tabItem, index) => tabItem)}
</ul>
<ul>
  <hr/>
  <div>break</div>
  <hr/>
  {tabsHidden.map((tabItem, index) => tabItem)}
</ul>

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