javascript - React 如何在 render() 中正确调用组件函数

Question

我正在使用 ReactJs 构建侧边栏菜单框架，需要了解在 ReactJs render() 函数中调用函数的方式.

代码如下:

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

当您尝试调用 this.buildItem() 时引用的 this 指的是匿名函数的上下文，而不是您的 React 组件。

通过使用 Arrow Functions除了在 render() 方法中使用 function 关键字定义的函数，您还可以使用 this 来根据需要引用 React 组件及其方法.

或者，您可以使用 (function () { ... }).bind(this) 来获得相同的结果。但这比较繁琐，最好使用箭头函数。