Question

我想访问数组内的this。具体来说，

this.props.categoryOpen.toString()

按以下方式使用时会引发错误。

https://codesandbox.io/s/23l3p906z

import React, { Component } from "react";

class Child extends Component {
  render() {
    return (
      <div>
        {this.props.categoryOpen.toString()}
        {this.rows.map(row => (
          <div>
            {row.cells.map(cell => (
              <div key={cell.label}>
                {cell.label}: {cell.data}
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }

  rows = [
    {
      cells: [
        {
          label: "Cell A",
          data: {this.props.categoryOpen.toString()}, // breaks
          //data: "Foo" // works
        },
        {
          label: "Cell B",
          data: "Bar"
        }
      ]
    }
  ];
}

export default Child;

箭头功能也会引发错误。

rows = () => [...

如何访问this？

Answer 1

删除数据中的{}。它应该可以工作

更新的代码和框：https://codesandbox.io/s/y0oo2v1xvv

Answer 2

不要像这样或在构造函数中静态定义行，因为当输入props更改时它们不会更新。为了在更改道具时自动重新渲染组件，您需要在render函数中重新生成行。

因此，只需在组件中创建一个名为getRows（或其他名称）的方法，然后从render进行调用。这样做的副作用是使this正常且通常也可以访问。

class Child extends Component {
  getRows() {
    return [
      {
        cells: [
          {
            label: "Cell A",
            data: this.props.categoryOpen.toString(),
          },
          {
            label: "Cell B",
            data: "Bar"
          }
        ]
      }
    ];
  }

  render() {
    const rows = this.getRows()
    return (
      <div>
        {this.props.categoryOpen.toString()}
        {rows.map(row => (
          <div>
            {row.cells.map(cell => (
              <div key={cell.label}>
                {cell.label}: {cell.data}
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }


}

export default Child;

当然，您也可以在render方法中内联生成rows，但是将其分解为自己的方法可以提高可读性。

Answer 3

正如其他注释所指出的，您在data字段定义中存在语法错误。我也不知道，但是显然您可以在类字段定义中引用词法上下文（这里是当前的组件实例）。值得注意的是它们还不是语言的一部分，我建议为此使用构造函数，该构造函数与Babel transform等效。

rows是在构造时定义的字段，如果要引用当前实例，则需要使用构造函数

class Child extends Component {
  constructor () {
    this.rows = [
      {
        cells: [
          {
            label: "Cell A",
            data: this.props.categoryOpen.toString(), // breaks
            //data: "Foo" // works
          },
          {
            label: "Cell B",
            data: "Bar"
          }
        ]
      }
    ];
  }
  render() {
    return (
      <div>
        {this.props.categoryOpen.toString()}
        {this.rows.map(row => (
          <div>
            {row.cells.map(cell => (
              <div key={cell.label}>
                {cell.label}: {cell.data}
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }

}

Answer 4

只需除去花括号

{
    label: "Cell A",
    data: this.props.categoryOpen.toString(), // remove curly braces
    //data: "Foo" // works
}

Answer 5

用这样的刻度包住变量。

data: `${this.props.categoryOpen.toString()}`,

这个应该很好

如何从React.js中的.map（）数组内部访问`this`？

5 个答案: