当我将与该函数交互的渲染视图传递给 react-native 中的 prop 时，如何绑定本地函数？

Question

我正在使用 renderContent 属性将渲染传递给 native-base 中的 Accordion 元素。渲染包含两个按钮，当按下时，运行功能是当前组件的本地功能。不幸的是，一旦实际呈现，这些功能将不可用。

如何正确绑定函数，以便在按下时引用正确的函数？

我正在使用最现代的稳定版本的 react-native、native-base，并且我正在运行通过 expo 对此进行测试。

这是关于 native-base 的文档：

http://docs.nativebase.io/Components.html#accordion-custom-header-content-headref

手风琴：

<Accordion
  dataArray={ this.state.websites }
  renderContent={ this._renderAccordionContent }
/>

渲染内容：

_renderAccordionContent(content) {
  return (
    <Button 
      onPress={() => this.openSite(content.path)}
    >
      <Text>Open</Text>
    </Button>
    <Button
      onPress={() => this.editSite(content.key)}
    >
      <Text>Edit</Text>
    </Button> 
  )
}

按下按钮时，预期的结果是函数运行。

实际结果是，当按下按钮时，会出现以下错误：

_this2.openSite is not a function.

_this2.editSite is not a function.

感谢您的帮助。

Answer 1

查看这篇展示绑定函数的几种不同方式的优秀文章https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

这是在使用 Accordion 组件的组件的构造函数中绑定它的示例。这绝不是绑定函数的唯一方法。上面的文章给出了 5 种不同的方法。

class MyComponent extends Component {

  constructor(props) {
    super(props);

    this.openSite = this.openSite.bind(this);
    this.editSite = this.editSite.bind(this);
  }

  // I am assuming you have written your functions like this and not as arrow functions
  openSite (path) {
    ...
  }

  editSite (key) {
    ...
  }

  _renderAccordionContent(content) {
    return (
      <Button 
        onPress={() => this.openSite(content.path)}
      >
        <Text>Open</Text>
      </Button>
      <Button
        onPress={() => this.editSite(content.key)}
      >
        <Text>Edit</Text>
      </Button> 
    )
}

  render() {
    ...
    <Accordion
      dataArray={ this.state.websites }
      renderContent={ this._renderAccordionContent }
    />
    ...
  }
}

当我将与该函数交互的渲染视图传递给 react-native 中的 prop 时，如何绑定本地函数？

How do I bind a local function when I pass a rendered view interacting with that function to a prop in react-native?

react-native

accordion

native-base