Javascript JS中的嵌套函数

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

在下面的示例中，我正在呈现一些内容，其值来自一系列嵌套函数。但是，我得到错误“UncaughtTypeError:无法读取未定义的属性'RenderInerContent'。你能帮我了解发生了什么以及如何解决这个问题吗？我的主要动机是理解如何将事物抽象成不同的功能

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>
    )
  }
}

import React，{Component}来自'React'；
导出默认类MyComponent扩展组件{
renderinercontent（）{
返回(
内部内容
)
}
renderContent（）{
让数据=[“a”、“b”、“c”]；
const displaydata=data.map（函数（点）{
返回(
{this.renderInerContent（）}
)
});
返回(
{displaydata}
)
}
render（）{
返回(
{this.renderContent（）}
)
}
}

映射函数中的上下文发生变化，因此“this”指向其他内容。如果你想得到“适当的”这个，你可以使用一个，它有词汇“this”

constdisplaydata=data.map（点=>{
返回(
{this.renderInerContent（）}
)
});

映射函数中的上下文发生变化，因此“this”指向其他内容。如果你想得到“适当的”这个，你可以使用一个，它有词汇“this”

constdisplaydata=data.map（点=>{
返回(
{this.renderInerContent（）}
)
});

此

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

function(point){
  return (
    <div key={point}>{this.renderInnerContent()}</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>
   )
}

---

PS：不确定其中任何一项是否在React中工作。

此

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

function(point){
  return (
    <div key={point}>{this.renderInnerContent()}</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>
   )
}

---

PS：不确定其中任何一个是否在React中工作。

这里的主要问题是您正在将函数传递给data.map，并且在该范围内，“this”不是您的外部范围（ChartsArea），但默认情况下它引用全局对象（窗口），因为它是一个匿名函数

因此，要使其发挥作用，您可以这样做：

var that = this; 

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    });

var=this；
const displaydata=data.map（函数（点）{
返回(
{that.renderInerContent（）}
)
});

或者在.map的第二个参数中传递上下文：

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    }, this);

const displaydata=data.map（函数（点）{
返回(
{that.renderInerContent（）}
)
}，这个）；

或使用绑定：

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    }.bind(this));

const displaydata=data.map（函数（点）{
返回(
{that.renderInerContent（）}
)
}.约束（这个）；

---

或者像其他人指出的那样使用箭头函数

这里的主要问题是您正在向data.map传递一个函数，在该范围内，“this”不是您的外部范围（ChartsArea），但默认情况下它引用全局对象（窗口），因为它是一个匿名函数

因此，要使其发挥作用，您可以这样做：

var that = this; 

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    });

var=this；
const displaydata=data.map（函数（点）{
返回(
{that.renderInerContent（）}
)
});

或者在.map的第二个参数中传递上下文：

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    }, this);

const displaydata=data.map（函数（点）{
返回(
{that.renderInerContent（）}
)
}，这个）；

或使用绑定：

const displaydata = data.map(function(point){
      return (
        <div key={point}>{that.renderInnerContent()}</div>
      )
    }.bind(this));

const displaydata=data.map（函数（点）{
返回(
{that.renderInerContent（）}
)
}.约束（这个）；

---

或者像其他人指出的那样使用箭头函数

我使用的最短的是：

{this.renderContent.bind（this.call（）}

---

从我的观点来看，有时它们有点难看，但这是最短的一个。

我使用的最短的一个是：

{this.renderContent.bind（this.call（）}

---

从我的观点来看，有时它们有点难看，但这是最短的。

非常感谢。我使用了fat-arrow函数，效果非常好。更重要的是，我理解这个概念。非常感谢。我使用了fat-arrow函数，效果非常好。更重要的是，我理解这个概念。