Невозможно вызвать родительский компонент из дочернего компонента

Question

Этот фрагмент кода работает очень хорошо, когда я удаляю анимированный класс из компонента Text.Однако я не мог понять, почему я не могу вызвать функцию родительских компонентов из дочернего компонента, когда пытаюсь использовать дочерний компонент с анимированным API.

import React from 'react';
import { Animated, TouchableOpacity, StyleSheet, Text, View, Dimensions } from 'react-native';

class Txt extends React.Component {
  constructor() {
    super()
    this.childButton = this.childButton.bind(this);
  }

  componentWillMount() {
    this.position = new Animated.ValueXY({ x: 200, y: 400 });
  }

  childButton() {
    this.props.callback(this.props.id);
  }

  render() {
    return (
      <TouchableOpacity onPress={this.childButton}>
        <Animated.Text style={{ transform: [{ translateY: this.position.y }] }}>
          button
        </ Animated.Text >
      </TouchableOpacity >
    )
  }
}

export default class App extends React.Component {
  constructor() {
    super()
    this.parentButton = this.parentButton.bind(this);
  }

  parentButton(param) {
    console.log(param);
  }

  render() {
    return (
      <View>
        <Txt callback={this.parentButton} id="_3131" />
      </View>
    );
  }
}

Answer 1

используйте функции стрелок для ваших объявлений вместо bind.В этом случае вы пытаетесь получить доступ к this.props.callback в childButton, который является областью закрытия, у которой нет свойства props.

childButton = () => {
  this.props.callback(this.props.id);
}