Javascript 如何使用ReactJS在同一组件内调用组件属性？

我正在构建一个带有子菜单级别的边栏菜单，我正在使用以下代码来构建菜单和子菜单：

侧栏菜单：

import React from 'react';

import SidebarMenuItem from './SidebarMenuItem';

var menuData = require("./data/menu.json");

class SidebarMenu extends React.Component {
    constructor(props) 
    {
        super(props);

        this.state = { expanded: true };
    };


  render() {

      return (
        <div>
          {
            menuData.map((item, index) => <SidebarMenuItem id={ index.toString()} key={index.toString()} {...item} />)
          }
        </div>
      );
  };
}

export default SidebarMenu;

另一个提示问题的线索是控制台输出：

0
1 
undefined <-- I was supposed to get 11 and 12 here, as this option has 2 submenus
2

---

已通知帮助以找出我的代码的错误。

您将收到警告，因为键是受限制的属性，不能作为道具传递，请将其更改为

keyValue

。当您使用

this.props.id

时，也会得到

未定义的
，因为在子菜单的
侧边栏菜单项渲染函数中，您仍在调用相同的组件，并且没有将
id
作为
属性传递。您可以在下面的代码片段中看到这一点。我希望有帮助


class侧边栏菜单扩展了React.Component{
建造师（道具）
{
超级（道具）；
this.state={expanded:true}；
};
render（）{
变量menuData=[
{ 
“标题”：“选项1”，
“链接”：“www.google.com”，
“图标”：“fa编辑”
},
{
“标题”：“选项2”，
“链接”：“，
“图标”：“fa你好”，
“子菜单”：
[
{
“标题”：“子选项2.1”，
“链接”：“www.yahoo.com”，
“图标”：“fa星号”
},
{
“标题”：“子选项2.2”，
“链接”：“www.tisafe.com”，
“图标”：“fa保存”
}
]
},
{
“标题”：“选项3”，
“链接”：“www.mezasoft.com”，
“图标”：“fa保存”
}
];
返回(
{
menuData.map（（项，索引）=>）
}
);
};
}
类SidebarMenuItem扩展了React.Component{
render（）{
console.log（'in render'，this.props）；
返回(
{this.props.submenu？this.props.submenu.map（（子项，索引）=>）：null}
)
}
}
SidebarMenuItem.propTypes={
id:React.PropTypes.string，
keyValue:React.PropTypes.string，
标题：React.PropTypes.string，
ref:React.PropTypes.string，
图标：React.PropTypes.string，
子菜单：React.PropTypes.array
}
ReactDOM.render（，document.getElementById（'app'））
您不能拥有名为“key”的道具。此名称保留供内部使用
Warning: SidebarMenuItem: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

0
1 
undefined <-- I was supposed to get 11 and 12 here, as this option has 2 submenus
2

[
  { 
    "title": "Option1",
    "link": "www.google.com",
    "icon": "fa-edit"
  },
  {
    "title": "Option2",
    "link": "",
    "icon": "fa-hello",
    "submenu": 
    [
      {
        "title": "SubOption2.1",
        "link": "wwww.yahoo.com",
        "icon": "fa-asterisk"
      },
      {
        "title": "SubOption2.2",
        "link": "wwww.tisafe.com",
        "icon": "fa-save"
      }
    ]
  },
  {
    "title": "Option3",
    "link": "www.mezasoft.com",
    "icon": "fa-save"
  }
]