Реагировать на нативный: проблема распространения событий с дочерним компонентом - PullRequest
Новая
       15

Реагировать на нативный: проблема распространения событий с дочерним компонентом

0 голосов
/ 31 марта 2019

У меня есть главный компонент, который включает в себя дочерний компонент A.

Этот дочерний компонент A имеет дочерний компонент B.

Компонент B имеет некоторый пользовательский интерфейс, который запускает события при взаимодействии щелчка.

Когда я запускаю компонент А, реакция правильная. События B запускаются, когда я нажимаю некоторые кнопки, например.

Когда я запускаю родительский компонент, он не работает.

Есть ли особая техника, чтобы избежать этого?

Я видел, что есть класс EventEmitter, но я не совсем понимаю, как его использовать.

Спасибо за вашу помощь

EDIT

Итак, я слил компонент A & B в один компонент C. Этот компонент C работает нормально. Я просто меняю цвет кнопки, которая принадлежит этому компоненту, когда пользователь нажимает ее.

Проблемы все еще появляются, когда я интегрирую этот компонент в родительский. Итак, я думаю, что проблема с родителем, метод рендеринга родителя: 

<ImageBackground source = {require('@assets/fonds.jpg')} style = {{width :'100%', height : '100%'}}>  
  <View style = {{flex :1}}>     
      <ComponentC  data= {this.state.data} />
  </View>      
</ImageBackground>

EDIT

Ну извини, я только что сделал этот тест:

Компонент B: 

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

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

myColor;

render(){
this.myColor = this.state.isSelected == true ? 'red' :'green' ;
return( <View style = {{flex : 1}}>
            <TouchableOpacity
                style={{backgroundColor : this.myColor}}
                onPress={()=>this.setState({isSelected : !this.state.isSelected})}
                underlayColor= {this.myColor}>
                <Text >Press me</Text>
            </TouchableOpacity>
        </View>
        )
    }
}

Компонент A 

import React from 'react';
import { View } from 'react-native';
import B from './B'

export default class A extends React.Component {

render(){
return(
        <View style = {{flex : 1}}>
                  <B/>
            </View>
          )

    }
}

Родитель 

import React from 'react';
import { View } from 'react-native';
import A from './A'

export default class Parent extends React.Component {

render(){
return(
        <View style = {{flex : 1}}>
                  <A/>
            </View>
          )

    }
}

A B и родитель работают нормально.

Мой настоящий код слишком сложен, чтобы о нем сообщать здесь. Объединенный компонент в моем предыдущем тесте содержит около 800 строк кода. Я делаю сложное исчисление, поэтому трудно скопировать что-то еще, кроме метода render (). Единственная особенность в том, что у меня есть объект d3 в дочернем компоненте, последний дочерний. Этот компонент взаимодействует с кнопкой в ​​примере, который я пробовал.

Так, кто-нибудь знает, как можно остановить событие в определенной точке, и если поведение d3 ограничено в этой точке?

Спасибо.

ПОСЛЕДНИЕ РЕДАКТИРОВАТЬ

Итак, решение похоже на получение контейнера View: 

<ImageBackground source = {require('@assets/fonds.jpg')} style = {{width :'100%', height : '100%'}}>      
  <ComponentC  data= {this.state.data} />     
</ImageBackground>

Но ... компонент не очень отзывчив. Это не очень надежно в производстве, но работает.

ЭПИЛОГ

Какой урок выучить? Сегодня код моих компонентов достигает 3 000 строк. И это только часть моего приложения.

Работа с реагировать на нативные часто очень расстраивает. Пока я не пытаюсь понять, почему инкапсулировать компонент в View, какой компонент инкапсулирует другой компонент, останавливать события в пользовательском интерфейсе этого View. Но я думаю, что почти не рекомендуется злоупотреблять View, использовать их только при необходимости (когда элементу нужен родительский элемент абсолютно). Поведение Flex может сохранить большинство сложных презентаций.

Во-вторых, я мог бы решить проблему отзывчивости, реализовав shouldComponentUpdate . Я думаю, что важно понимать этот метод и применять его везде. Мое приложение теперь отзывчиво, и если оно может кому-то помочь, я буду счастлив.

Спасибо, что читаете, веселитесь.

...