Question

我有一个主要组件，其中包括一个子组件A。

此子组件A具有一个子组件B。

组件B有一些UI，它们会在点击互动时触发事件。

运行组分A时，反应正确。例如，当我单击某些按钮时，就会触发B的事件。

运行父组件时，它不起作用。

有避免这种情况的特殊技术吗？

我看到有一个EventEmitter类，但我真的不知道如何使用它。

谢谢您的帮助

EDIT

因此，我将组件A和B合并为一个组件C。此组件C正常工作。我只是在用户按下按钮时更改属于该组件的按钮的颜色。

当我将此组件集成到父级时，问题仍然出现。所以，我认为问题出在父级，父级的render方法是：

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

    }
}

AB和父母都能正常工作。

我的真实代码过于复杂，无法在此处进行报告。我之前的测试中的合并组件处理了约800行代码。我进行了复杂的演算，因此很难复制除render（）方法之外的其他内容。唯一的特殊性是我在子组件（最后一个子组件）中有一个d3对象。该组件与我尝试的示例中的按钮具有相同的交互作用。

那么，有谁知道某个事件如何在某个时刻停止，以及d3行为是否在此时受到限制？

谢谢。

最后编辑

因此，该解决方案似乎检索了View容器：

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

但是...该组件的响应速度不是很好。它在生产中并不是真正可靠的，但可以。

EPILOGUE

要学习什么课程？今天，我的组件代码达到了3000行。它只是我的应用程序的一部分。

使用react native工作通常非常令人沮丧。现在，我不尝试理解为什么将一个组件封装在一个View中，该组件封装另一个组件，并停止此View上的UI事件。但是我认为，不滥用View几乎是一种最佳实践，仅在必要时使用（当一个元素绝对需要父元素时）。 Flex行为可以保存大多数复杂的演示文稿。

第二，我可以通过实现 shouldComponentUpdate 解决响应性问题。我认为了解这种方法并在任何地方实现它都是至关重要的。我的应用现在可以响应了，如果可以帮助别人，我会很高兴的。

感谢您阅读，玩得开心。

使用子组件来响应native：events传播问题

0 个答案: