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

Question

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

侧边栏菜单：

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;

SidebarMenuItem：

import React from 'react';

class SidebarMenuItem extends React.Component {

    render() {

        console.log(this.props.id);

        return (
            <div>
                <a href={this.props.link}>{this.props.title}<i className={'fa ' + this.props.icon}/></a>

                {this.props.submenu ? this.props.submenu.map((subitem, index) => <SidebarMenuItem key={this.props.id + index.toString()} {...subitem} />) : null }

            </div>
            )
    }

}

SidebarMenuItem.propTypes = {
    id: React.PropTypes.string,
    key: React.PropTypes.string,
    title: React.PropTypes.string,
    ref: React.PropTypes.string,
    icon: React.PropTypes.string,
    submenu: React.PropTypes.array
}

export default SidebarMenuItem;

虽然我可以在屏幕上看到子菜单，但我收到以下错误：

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

最后我的menu.JSON数据：

[
  { 
    "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"
  }
]

帮助了解我的代码有什么问题。

Answer 1

您收到警告，因为key是受限制的属性，无法作为道具传递，请将其更改为keyValue。此外，当您使用undefined时，您会获得this.props.id，因为在您的SidebarMenuItem render function子菜单中，您仍在调用相同的组件，并且您没有将id作为{{1}传递}}。你可以在下面的片段中看到。我希望它有所帮助

prop

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

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


  render() {
      var menuData = [
  { 
    "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"
  }
];
      return (
        <div>
          {
           menuData.map((item, index) => <SidebarMenuItem id={ index.toString()} keyValue={index.toString()} {...item} />)
          }
        </div>
      );
  };
}

class SidebarMenuItem extends React.Component {

    render() {

        console.log('in render',this.props);

        return (
            <div>
                <a href={this.props.link}>{this.props.title}<i className={'fa ' + this.props.icon}/></a>

                {this.props.submenu ? this.props.submenu.map((subitem, index) => <SidebarMenuItem keyValue={this.props.id + index.toString()} {...subitem} />) : null }

            </div>
            )
    }

}

SidebarMenuItem.propTypes = {
    id: React.PropTypes.string,
    keyValue: React.PropTypes.string,
    title: React.PropTypes.string,
    ref: React.PropTypes.string,
    icon: React.PropTypes.string,
    submenu: React.PropTypes.array
}

ReactDOM.render(<SidebarMenu/>, document.getElementById('app'));