Javascript 如何在React Native中为ListView中的每个元素绑定函数？

我将一个组件从createClass重写到类定义，以适应eslint react本机linting，然后我发现我无法像以前那样将函数绑定到数组中的元素。前一个代码如下所示：

createClass({
  render() {
    return (
      <ListView style={styles.listView}
        dataSource={this.state.data}
        renderRow={this._renderTopic}
      />
    )
  },
  _renderTopic(topic) {
    return (
      <TouchableHighlight onDelayColor="#dddddd"
        onPress={() => this._jumpTo(topic.id) }
      >
    )
  },
  _jumpTo(id) {
    this.props.navigator.push({
      name: 'Topic page',
      component: Topic,
      passProps: {
       topicId: id,
      },
    });
  }
})

这将立即导致错误：

可能的未处理承诺拒绝无法读取null的属性\u currentElement

。（这在这里很奇怪，jumpTo函数应该是惰性的，对吗？）

---

那么，将动态函数绑定到ListView中的项的正确方法是什么呢？

第二个例子是wild guess

renderRow={this._renderTopic.bind(this)}

---

第二个例子，胡乱猜测

renderRow={this._renderTopic.bind(this)}

---

我认为whitep4nther的方向是正确的，我做了以下工作来绕过render方法中的绑定

```

```

---

从文档中查看此链接

我认为whitep4nther的方向是正确的，我执行以下操作来绕过渲染方法中的绑定

```

```

---

从文档中查看此链接

您需要将其绑定到方法

<ListView
   dataSource={this.state.dataSource}
   renderRow={this._renderTopic.bind(this)}
/>

---

您需要将其绑定到方法

<ListView
   dataSource={this.state.dataSource}
   renderRow={this._renderTopic.bind(this)}
/>

---

如果使用react类构造函数，然后使用arrow函数，则不必绑定它

这是可能的，因为箭头函数不像函数那样创建闭包

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "Some content"
    };
  }
  clickHandler = event => {
    //handle the click
  };
  render() {
    return (
      <div>
        <p> Some Content </p>
        <button onClick={this.clickHandler}> Click Me</button>
      </div>
    );
  }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 内容：“一些内容” }; } clickHandler=事件=>{ //处理点击 }; render（）{ 返回( 一些内容

点击我 ); } }

---

如果使用react类构造函数，然后使用arrow函数，则不必绑定它

这是可能的，因为箭头函数不像函数那样创建闭包

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "Some content"
    };
  }
  clickHandler = event => {
    //handle the click
  };
  render() {
    return (
      <div>
        <p> Some Content </p>
        <button onClick={this.clickHandler}> Click Me</button>
      </div>
    );
  }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 内容：“一些内容” }; } clickHandler=事件=>{ //处理点击 }; render（）{ 返回( 一些内容

点击我 ); } }

---

---

您愿意使用ES6吗？它会让这个问题trivial@MatthewHerbst是的，我正在编写ES6，使用Babel eslint和eslint来lint我的代码。源代码在这里：Linted代码尚未提交。您愿意使用ES6吗？它会让这个问题trivial@MatthewHerbst是的，我正在编写ES6，使用Babel eslint和eslint来lint我的代码。源代码在这里：Linted代码尚未提交。尚未测试，但基于eslint react插件，不建议使用bind。即使这样也行，我还是希望有一个更好的解决方案。他马上就在谈论你的问题：。他建议在构造函数中绑定该方法，该方法本质上是相同的，无需在每次渲染中创建新函数。但公平地说，在某种程度上你不需要这种优化，也不需要有“更好”的解决方案，这个方法是专门为解决这类问题而创建的。答案在你之前发布的链接中，在页面底部！；）“不幸的是，React ES6类不会像使用旧React.createClass创建的组件那样自动绑定其方法”未测试，但基于eslint React插件，不建议使用绑定。即使这样也行，我还是希望有一个更好的解决方案。他马上就在谈论你的问题：。他建议在构造函数中绑定该方法，该方法本质上是相同的，无需在每次渲染中创建新函数。但公平地说，在某种程度上你不需要这种优化，也不需要有“更好”的解决方案，这个方法是专门为解决这类问题而创建的。答案在你之前发布的链接中，在页面底部！；）“不幸的是，React ES6类不会像使用旧React.createClass创建的组件那样自动绑定它们的方法”我这里有几个renderXX和fetchXX方法，所以我必须多次绑定它们。有什么好主意可以解决这个问题吗？你应该考虑使用像lodash这样的东西，它有一个

\uuz.bindAll

函数，这很有帮助！非常感谢。我这里有几个renderXX和fetchXX方法，所以我必须多次绑定它们。有什么好主意可以解决这个问题吗？你应该考虑使用像lodash这样的东西，它有一个

\uuz.bindAll

函数，这很有帮助！非常感谢。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "Some content"
    };
  }
  clickHandler = event => {
    //handle the click
  };
  render() {
    return (
      <div>
        <p> Some Content </p>
        <button onClick={this.clickHandler}> Click Me</button>
      </div>
    );
  }
}