Question

您好，谢谢。我是React编程的新手，并且正在使用React Native开发应用程序，因此我可以学习它。我能够完成它并在IOS模拟器上使用它，并且效果很好，但是在Android模拟器上进行测试时，事情变得很丑...

无法将没有YogaNode的孩子添加到没有测量功能的父母

在正确地尝试制作模块化组件之后，我最终遇到了相同的错误，所以我想进入代码以澄清所有这些问题。

给出此类：

export class FooView extends React.Component {
    this.state = {
        fooArray: ["AAA", "BBB"],
        backgroundColors: ['#FFFFFF','#E9E9E9'],
        currentKey: 0,
        currentColor:'#FFFFFF',
        evenRow: 'false'
    }
    return(
        <ScrollView>
            {this.state.fooArray.map(fooText => 
                <FooElement 
                    text={fooText} 
                    key={this.state.currentKey}
                    color={this.state.currentColor}/>
                )}
        </ScrollView>
    );
}

和

export class FooElement extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <View style={{backgroundColor:this.props.color}}>
                <Text>{this.props.text}</Text>
            </View>
        )
    }
}

重点是：我有一个父组件 FooView ，它由ScrollView和一些属性组成，并且取决于在内部创建的 fooArray 中的元素其中需要的 FooElement 个。为简化起见，此处的数组是硬编码的，但在实际示例中，它是从Firebase数据库获取信息的。

我想做的是，每次将新的 FooElement 添加到ScrollView时，更改 FooView 的状态类来设置新的key和currentColor，因此新组件的背景也会发生变化，显示出奇偶彩色列表。另外，必须增加键值，这样解释器才不会向我发出任何警告。

我试图在return语句中递增一个初始化为0的键变量（我认为这是一个肮脏的解决方案……的确，它在Android上不起作用）并像之前的{key = key+1}一样递增它打开<FooElement.../>标签。在iOS上有效，并在Android上引发了难看的 YogaNode 错误。

那么，有没有一种干净的方法可以执行一些代码来在map()函数的迭代之间更改FooView的状态，然后使用新的state属性创建一个新的 FooElement ？

感谢您阅读，祝您有个愉快的夜晚。

在React Native上动态生成和样式化组件的问题

0 个答案: