Reactjs 在没有列表或.map的情况下响应警告键

React文档说，在创建元素列表时，“键”是一个特殊的字符串属性。

但是我在没有呈现列表的情况下收到了react keys警告，我不知道为什么

我有一个名为

ExpandableCard.js

的组件，它有条件地呈现标题子级：

  // ExpandleCard return call
  ...
  return <Card className={classes.expandableCard} classes={{ root: classes.cardRoot }}>
    <div className={classes.cardHeader}>
      { props.header ? props.header : null }
      <div className={classes.headerActions}>
        {
          expanded
            ? <KeyboardArrowUp onClick={() => { setExpanded(false) }} />
            : <KeyboardArrowDown onClick={() => { setExpanded(true) }} />
        }
        { props.editable && props.onRemove ? <Close onClick={props.onRemove} /> : null }
      </div>
    </div>
    ...
    // renders children
   <Card/>

我最初认为这是我使用DetailRow子级映射呈现的列表的错误，但我发现，当我使用键呈现

标题

道具时，错误消失了：

module.exports = {
  plugins: [...],
  presets: [...],
  env: {
    production: {
      plugins: [
        '@babel/plugin-transform-react-inline-elements'
      ]
    }
  }
}

---

return所以我发现我的问题在于在开发环境中启用
@babel/plugin transform-react内联元素

通过将其更改为仅在生产中启用，我的错误消失了：

module.exports = {
  plugins: [...],
  presets: [...],
  env: {
    production: {
      plugins: [
        '@babel/plugin-transform-react-inline-elements'
      ]
    }
  }
}

根据：

此转换只应在生产环境中启用（例如，在缩小代码之前），因为尽管它可以提高运行时性能，但它会使警告消息更加隐晦，并跳过开发模式中发生的重要检查，包括proptype

我也有同样的问题。我也在使用HOCs。你找到解释了吗？是的，我找到了，这是一个巴别塔问题，我会把它作为答案发布。希望它与您的问题相同。谢谢您的快速回复。你帮我节省了很多时间！
module.exports = {
  plugins: [...],
  presets: [...],
  env: {
    production: {
      plugins: [
        '@babel/plugin-transform-react-inline-elements'
      ]
    }
  }
}