JS 中的嵌套函数

IT技术 javascript reactjs
2021-04-13 22:31:43

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

在下面的示例中，我正在渲染一些内容，其值来自一系列嵌套函数。但是，我收到错误“未捕获的类型错误：无法读取未定义的属性‘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>
    )
  }
}
4个回答

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 中都不起作用。

太感谢了。我使用了胖箭头功能，效果很好。更重要的是，我理解了这个概念。
2021-06-06 22:31:43

map 函数内部的上下文会发生变化，因此“this”指向其他内容。如果你想拥有“正确的” this 你可以使用一个箭头函数，它具有词法“this”。

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

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

所以为了让它工作，你可以这样做：

var that = this; 

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

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

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

或者使用绑定：

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

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

我使用的最短的一个是这样的：
<div>{this.renderContent.bind(this).call()}</div>.

从我的角度来看，有时它们会变得有点丑陋，但这是最短的。

其它你可能感兴趣的问题
上一篇ReactJS“未处理的拒绝（类型错误）：this.state.features.map 不是函数” 下一篇如何将json数据返回到react状态？