Question

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

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

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);
}

Answer 2

你做得对。

MyComponent就像它应该的那样“愚蠢”：它不关心它的道具的来源，它独立于应用程序的更高逻辑水平，它可以在应用程序的其他地方重用

您可以使用的一些改进：

MyComponent本身不需要myId。从组件中排除它，让父母组件处理相关逻辑到id
为道具onPress提供安全检查。如果要在某处重用MyComponent，最好在调用之前检查onPress属性是否存在，或者在开发人员添加不需要的道具类型时为onPress提供默认值。

MyComponent

class MyComponent extends Component {
  handlePress = (e) => {
    if (typeof this.props.onPress === 'function') {
      this.props.onPress()
    }
  }

  render() {
    return (
      <TouchableHighlight onPress={this.handlePress}>
        <Text>Click me to trigger function</Text>
      </TouchableHighlight>
    )
  }
}

并在MyComponent中致电MyClass：

class MyClass extends Component {
  _onItemPress(myId) {

  }

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

  }

}

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

2 个答案: