React Native使用参数作为props传递函数

Question

从我所读到的最好的尝试和结构反应应用程序与"哑"渲染器的组件.您有容器可以获取数据并将其作为道具传递给组件.

这很好用,直到你想要在需要除事件之外的参数的链中传递函数.

class MyClass extends Component {


  _onItemPress (myId) {
    // do something using myId
  }

  render () {

    return <MyComponent myID={10} onPress={(myId) => this._onItemPress(myId)} />

  }

}

如果我只是将它作为我的onPress处理程序传递给MyComponent,它将在调用时不返回myId.为了解决这个问题,我最终会做这样的事情.

export default ({myId, onPress) => {
  const pressProxy = () => {
    onPress(myId)
  }

  return (
    <TouchableHighlight onPress={pressProxy}>
      <Text>Click me to trigger function</Text>
    </TouchableHighlight>
  )
}

我完全错误地这样做了吗？我希望能够有一个简单的组件,我可以重复使用它的列表项,其唯一的功能是获取标题,onpress函数并返回一个列表项,用于ListViews renderRow函数.然而,许多onPress函数都需要在onPress中使用变量.

有没有更好的办法？

Answer 1

正确的语法是这样的：

render () {
    let myId = 10;
    return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} />
}

this另外，如果您打算在内部使用_onItemPress（例如调用 MyClass 中的其他方法），您需要像这样绑定作用域：

render () {
    let myId = 10;
    return <MyComponent 
        myID={myId} 
        onPress={() => this._onItemPress(myId).bind(this)} />
}

...或者如果您愿意，您可以将其绑定在构造函数中：

constructor(props) {
    super(props);
    this._onItemPress = this._onItemPress.bind(this);
}