JS中的嵌套函数

Question

我试图理解reactjs中的一些概念，但是我无法理解函数的嵌套。我创建了以下示例来调查我的担忧。

在下面的示例中，我呈现了一些内容，这些内容的价值来自一系列嵌套函数。但是，出现错误“未捕获的TypeError：无法读取未定义的属性’renderInnerContent’”。您能帮我了解发生了什么以及如何解决此问题吗？我的主要动机是了解如何将事物抽象为不同的功能。

import React, { Component } from 'react';

export default class MyComponent extends Component {
  renderInnerContent() {
    return (
      <div>Innercontent</div>
    )
  }

  renderContent() {
    let data = ["a","b","c"];
    const displaydata = data.map(function(point){
      return (
        <div key={point}>{this.renderInnerContent()}</div>
      )
    });
    return (
      <div>{displaydata}</div>
    )
  }

  render() {
    return (
      <div>{this.renderContent()}</div>
    )
  }
}

Answer 1

this 未在该函数的上下文中定义：

function(point){
  return (
    <div key={point}>{this.renderInnerContent()}</div>
  )
}

因为它是一个新功能。您有不同的选项可以传递this给该函数：

1-
胖箭头功能：

renderContent() {
   let data = ["a","b","c"];
   const displaydata = data.map((point) => {
      return (
        <div key={point}>{this.renderInnerContent()}</div>
       )
   });
   return (
      <div>{displaydata}</div>
   )
}

2-定义一个变量：

renderContent() {
   let data = ["a","b","c"];
   let _this = this;
   const displaydata = data.map(function(point){
      return (
        <div key={point}>{_this.renderInnerContent()}</div>
       )
   });
   return (
      <div>{displaydata}</div>
   )
}

3-用途bind：

renderContent() {
   let data = ["a","b","c"];
   const displaydata = data.map(function(point){
      return (
        <div key={point}>{this.renderInnerContent()}</div>
       )
   }.bind(this));
   return (
      <div>{displaydata}</div>
   )
}

PS：不确定其中任何一个在React中都无法正常工作。