Метод объединения вызовов для onLayout

Question

У меня есть компонент, который использует свойство 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? Я мог бы создать новый метод, но как я могу работать с параметром 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

@ ответ Yuriy был хороший ключ.

Я прошел onLayout в качестве аргумента через bind:

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