Question

我已经实现了从父级到子级组件的回调，并如本answer中所述从子级成功调用了它。在回调中，我需要父级的props属性navigate。但是回调中的this.props返回undefined。我如何获得道具对象？我不想将导航道具传递给孩子。

回调：

  _onSeperatorPress(item){
    console.log(item);
    console.log(this);
    this.navigation.navigate("main");
  }

主叫孩子：

    <HorizontalList
      data={genresData}
      keyExtractor={(item, index) => item.description}
      onPress={this._onSeperatorPress} />

子级回调：

<TouchableHighlight
            onPress={() => this.props.onPress(item)}
            onShowUnderlay={separators.highlight}
            onHideUnderlay={separators.unhighlight}>
            </TouchableHighlight>

Answer 1

您遇到有约束力的问题。您需要绑定函数才能访问函数内部的状态或道具。

ES5：正常功能，您需要在构造函数中手动绑定

this.handleFunction = this.handleFunction.bind(this);

handleFunction(){
   console.log(this.props); // props are available
}

ES6：箭头功能-绑定自动执行，您可以避免与范围相关的问题

handleFunction = () = {
  console.log(this.props); // props are available 
}

在发送给子组件的回调中找不到父的道具

1 个答案: