JS中的嵌套函数

我试图理解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>

)

}

}

回答:

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中都无法正常工作。

以上是 JS中的嵌套函数 的全部内容, 来源链接: utcz.com/qa/414764.html

回到顶部