Question

我有一个使用error: could not read CFBundleIdentifier from Info.plist (null)属性的组件。但是我也希望从父组件接收prop并执行给定的方法以及内部方法。

在我的组件中我有

onLayout

并且我在渲染方法中

onLayout = event => { 
  const { width } = event.nativeEvent.layout;
  this.setState({ width: width });
}

如何将道具const { onLayout } = this.props; return ( <View onLayout={this.onLayout}> ... </View> )与内部onLayout合并？我可以创建一个新方法但是如何处理this.onLayout参数，保留ES6语法？

Answer 1

使用函数原型的bind方法将函数绑定到当前上下文：

<View onLayout={this.onLayout.bind(this)}>

Answer 2

@ Yuriy的答案是一个很好的线索。

我通过onLayout传递bind作为参数：

onLayoutInternal = (onLayout, event) => { 
  const { width } = event.nativeEvent.layout;
  this.setState({ width: width });
  onLayout(event);
}

像这样使用bind：

render() {
  const { onLayout } = this.props;
  return (
    <View onLayout={this.onLayoutInternal.bind(this, onLayout)}>
  )
}

Answer 3

我认为创建结合两个子方法的新方法是很好的方法：

onLayout = event => {
  this.props.onLayout(event);
  this.updateWidth(event); 
}

updateWidth = event => {
  const { width } = event.nativeEvent.layout;
  this.setState({ width: width });
}

并在渲染中：

return (
  <View onLayout={this.onLayout.bind(this)}>
  ...
  </View>
)

结合onLayout的方法调用

3 个答案: