Question

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

在下面的例子中，我正在渲染一些内容，其中的值来自一系列嵌套函数。但是，我收到错误“Uncaught 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未在该函数的上下文中定义：

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

因为它是一个新功能。您有不同的选项可以将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> ) }传递给该函数：

1- Fat arrow function：

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

2-定义变量：

{{1}}

3-使用bind：

{{1}}

PS：不确定其中任何一个在React中都不起作用。

Answer 2

上下文在map函数内部发生了变化，因此＆＃34;这个＆＃34;指向别的东西。如果你想拥有＆＃34;正确的＆＃34;你可以使用arrow function，它有词汇＆＃34;这个＆＃34;。

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

Answer 3

这里的主要问题是你将一个函数传递给data.map并且在那个范围内＆＃39;这个＆＃39;不是你的外部范围（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);

或者使用bind：

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

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

Answer 4

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

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

在JS中嵌套函数

4 个答案: