Question

我正在尝试为数组中的每个对象创建一个带有行的表，但我还希望每行包含一个带有自定义onClick函数的Button，该函数继承自行创建者：

var React = require('react');
import {Button} from 'react-bootstrap';
...

export class ObjectTable extends React.Component {
  render() {
    return (
      <div>
        <table>
          ...
          <tbody>
            {
              this.props.objects.map(
                function(object) {
                  return <TableRowWrapper key={object.id} object={object} action={this.props.action} />;
                  }
                )
            }
          </tbody>
        </table>
      </div>
    )
  }
};

var TableRowWrapper = React.createClass({
  ...
  render() {
    return (
      <tr>
        <td><Button onClick={this.props.action}>Object 1</Button></td>
      </tr>
    )
  }
});

objects和action都作为道具传递给<ObjectTable />，而ObjectTable类中的任何其他元素我都可以调用{this.props.action}得到它。

但是，当我尝试在objects地图内打电话时，它无效（大概是因为this不再引用ObjectTable）。我已经阅读了map Method (Array) (JavaScript)中的示例，但我无法this.props.objects.map(function(object, this) {...或this.props，this.props.action等任何其他排列。

这样做的正确方法是什么？

Answer 1

使用箭头功能

export class ObjectTable extends React.Component {
  render() {
    return (
      <div>
        <table>
          ...
          <tbody>
            {
              this.props.objects.map(
                (object) => {
                  return <TableRowWrapper key={object.id} object={object} action={this.props.action} />;
                  }
                )
            }
          </tbody>
        </table>
      </div>
    )
  }
};

Answer 2

您需要存储对原始 this 的引用，并在地图回调函数中使用它：

export class ObjectTable extends React.Component {
  render() {
    var self = this;
    return (
      <div>
        <table>
          ...
          <tbody>
            {
              this.props.objects.map(
                function(obj) {
                  return <TableRowWrapper key={obj.id} object={obj} action={self.props.action} />;
                  }
                )
            }
          </tbody>
        </table>
      </div>
    )
  }
};

如何将函数传递给另一个对象的映射

2 个答案: