Question

我正在使用renderContent道具将渲染传递给本机基础上的Accordion元素。渲染包含两个按钮，按下这些按钮可运行当前组件本地的功能。不幸的是，一旦实际渲染这些功能将不可用。

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

我正在使用react-native，native-base的最新稳定版本，并且正在通过Expo进行测试。

以下是基于本机的文档：

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

手风琴：

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

renderContent：

_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 }
    />
    ...
  }
}

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

1 个答案: