联合方法调用onLayout

Question

我有一个使用onLayout属性的组件。不过，我还想从父组件接收prop，并执行给定的方法以及内部方法。

在我的组件我有

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

，并在渲染方法我有

const { onLayout } = this.props; 
return (
    <View onLayout={this.onLayout}> 
    ... 
    </View> 
) 

我怎样才能结合onLayout道具与内部this.onLayout？我可以创建一个新的方法，但我该如何处理event参数，保持ES6语法？函数原型的

Answer 1

我认为，创造新方法将两个子方法的好办法：

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

Answer 2

使用bind方法给你的函数绑定到当前环境：

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

Answer 3

@尤里的回答是一个很好的线索。

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

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

使用绑定像这样：

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