Проблема передачи ссылки от родителя к ребенку - PullRequest
Новая
       12

Проблема передачи ссылки от родителя к ребенку

0 голосов
/ 17 февраля 2020

У меня есть компонент, который использует другой компонент, называемый Popover, который отображает сообщение, когда я нажимаю на него. Интересно, что он использует ссылку, чтобы сделать сообщение указателем на компонент. Свойство, которое делает это fromView. 

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableWithoutFeedback
} from 'react-native';

import Popover from 'react-native-popover-view';

export default class CompNum extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isVisible: false,
    }
  }

  openPopover = () => {
    this.setState({ isVisible: true });
  }

  closePopover = () => {
    this.setState({ isVisible: false });
  }

  render() {
    return (
      <TouchableWithoutFeedback onPress={this.openPopover} ref={ref => this.touchable = ref} >
        <View style={styles.container}>
          <View style={{ backgroundColor: "#1B4F72" }}>
            <Text style={styles.textT}>{this.props.nom}</Text>
          </View>
          <View style={{ backgroundColor: 'white', alignItems: 'center' }}>
            <Text style={styles.text}>{this.props.value != null ? this.props.value : 0}</Text>
          </View>

          <Popover
            isVisible={this.state.isVisible}
            fromView={this.touchable}
            onRequestClose={this.closePopover}
          >
            <Text style={{ margin: 15 }}>{this.props.textoPopover}</Text>
          </Popover>

        </View>
      </TouchableWithoutFeedback>
    )
  }
}

Я хочу сделать этот Popover компонентом для вызова его из любого другого компонента, поэтому я попробовал это:

Новый компонент 

import React from 'react';
import { Text } from 'react-native';

import Popover from 'react-native-popover-view';

export default class PopoverButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isVisible: false,
    }
  }

  openPopover = () => {
    this.setState({ isVisible: true });
  }

  closePopover = () => {
    this.setState({ isVisible: false });
  }

  render() {
    return (
      <Popover
        isVisible={this.state.isVisible}
        fromView={this.props.referedComp}
        onRequestClose={this.closePopover}
      >
        <Text style={{ margin: 15 }}>{this.props.texto}</Text>
      </Popover>
    )
  }
}

Предыдущий 

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableWithoutFeedback
} from 'react-native';

import PopoverButton from './PopoverButton';

export default class CompNum extends React.Component {
  render() {
    return (
      <TouchableWithoutFeedback
        onPress={() => this.popover.openPopover()}
        ref={ref => this.touchable = ref}
      >
        <View style={styles.container}>
          <View style={{ backgroundColor: "#1B4F72" }}>
            <Text style={styles.textT}>{this.props.nom}</Text>
          </View>
          <View style={{ backgroundColor: 'white', alignItems: 'center' }}>
            <Text style={styles.text}>{this.props.value != null ? this.props.value : 0}</Text>
          </View>

          <PopoverButton
            ref={ref => this.popover = ref}
            texto={this.props.textoPopover}
            referedComp={this.touchable}
          />

        </View>
      </TouchableWithoutFeedback>
    )
  }
}

Это работает, показывает сообщение, но не указывает на компонент, поэтому я предполагаю, что ошибка в том, как я передаю ребёнку ссылку. Как мне это сделать?

...