Реагировать, как правильно называть функциональный элемент внутри визуализации()

Question

Я строю меню боковой панели каркаса с помощью ReactJs и нужно понять, каким образом, чтобы вызвать функцию внутри ReactJsrender() функции.

код ниже:

import React from 'react'; 

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

class SidebarMenu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { expanded: true }; 
    this.buildItem = this.buildItem.bind(this); 
    }; 

    buildItem(title, ref, icon) { 
    return (
     <div className={"item" + this.props.key}> 
     <a href={ref}>{title}<i className={"fa " + icon} /></a> 
     </div> 
    ); 
    }; 

    render() { 

    return (
     <div> 
     { 
      menuData.forEach(function (item) { 
      this.buildItem(item.title, item.ref, item.icon); 

      if (item.hasOwnProperty("submenu")) { 
       item.submenu.forEach(function (subitem) { 
       this.buildItem(subitem.title, subitem.ref, subitem.icon); 
       }); 
      } 
      }) 
     } 

     </div> 
    ); 
    }; 
} 

export default SidebarMenu; 

Данный код показывает следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'buildItem' of undefined 

Как правильно вызвать функцию, которая будет отображать данные внутри ReactJs функции?

Answer 1

Ниже один раствор, используя жирную стрелку, AKA стрелками функции:

import React from 'react'; 

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

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

     this.state = { expanded: true }; 

     this.buildItem = this.buildItem.bind(this); 
    }; 

    buildItem(title, ref, icon) { 

    return (
     <div className={"item" + this.props.key}> 
     <a href={ref}>{title}<i className={"fa " + item.icon}/></a> 
     </div> 
    ); 
    }; 

    render() { 

     return (
     <div> 
      { 
      menuData.forEach(item => { 
       this.buildItem(item.title, item.ref, item.icon); 

       if (item.hasOwnProperty("submenu")) 
       { 
        item.submenu.forEach(subitem => { 
        this.buildItem(subitem.title, subitem.ref, subitem.icon); 
        }); 
       } 

      }) 
      } 

     </div> 
    ); 
    }; 
} 

export default SidebarMenu; 

Другим решением было бы:

render() { 

     return (
     <div> 
      { 
      menuData.forEach(function (item) { 
       this.buildItem(item.title, item.ref, item.icon); 

       if (item.hasOwnProperty("submenu")) 
       { 
        item.submenu.forEach(function (subitem) { 
        this.buildItem(subitem.title, subitem.ref, subitem.icon); 
        }.bind(this)); 
       } 

      }.bind(this)) 
      } 

     </div> 
    ); 
    }; 
} 

Но, IMO, лучшим решением было бы реорганизовать код, используя компонент:

import React, {PropTypes, Component} from 'react'; 

const menuData = require('./data/admin.menu.json'); 

function MenuItem({key, ref, title, icon, submenu}) { 
    return (
    <div className={`item${key}`}> 
     <a href={ref}>{title}<i className={`fa ${icon}`}/></a> 
     if (submenu) { 
     submenu.map((subitem) => <MenuItem {...subitem} />) 
     } 
    </div> 
); 
} 

MenuItem.propTypes = { 
    key: PropTypes.string, 
    title: PropTypes.string, 
    ref: PropTypes.string, 
    icon: PropTypes.string, 
    submenu: PropTypes.array, 
}; 

class SidebarMenu extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      expanded: true, 
     }; 
    } 

    render() { 
     return (
      <div> 
       { 
        menuData.map((subitem) => <MenuItem {...subitem} />) 
       } 
      </div> 
     ); 
    } 
} 

export default SidebarMenu; 

Answer 2

Указанный this, когда вы пытаетесь позвонить this.buildItem(), относится к контексту анонимной функции, а не к компоненту React.

При использовании Arrow Functions вместо функций, определенных с помощью ключевого слова function внутри метода render(), вы можете использовать this для ссылки на компонент и его методы React по желанию.

В качестве альтернативы вы можете использовать (function() { ... }).bind(this) для достижения того же результата. Но это более утомительно, и использование функций стрелок является предпочтительным.

Answer 3

Вы можете добавить эту строку:

render() { 
    let that = this 
    return (

, а затем вместо this.buildItem использовать that.buildItem или вам может понадобиться that.buildItem.bind(that)