如何使用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是受限制的屬性，無法作為prop傳遞，請將其更改為keyValue 。 同樣，當您使用this.props.id時， this.props.id得到undefined ，因為在SidebarMenuItem render function的子菜單中，您仍在調用相同的組件，並且沒有將id作為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')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="app"></div>