对每个其他事件进行本机添加父组件的反应

Question

我有一个问题和需要显示的4个答案。

前2个答案选项应在相邻行中显示，而后2个答案选项应在下一行显示。

所以，我需要一个组件从第一次出现开始，到第二次出现之后结束。

<View>
    <answer-1>
    <answer-2>
</View>

类似地，应该从第3次出现开始，到第4次出现之后结束。

<View>
    <answer-3>
    <answer-4>
</View>


return (
        <View style={globalStyles.homepagecontainer}>
            <Text>{question}</Text>                                                                            
            {answers.map((a, key)=> {                                                        
                console.log('a - ', a)    
                console.log('key - ', key)    
                const cssstyles1 = {
                    flex: 1,
                    flexDirection: 'row'}
                const cssstyles2 = {
                    flex: 1,
                    backgroundColor: colors[key],
                    marginBottom:10,
                    justifyContent: 'center',        
                    flexDirection: 'column'}
                if ( key == 0 || key == 1 ){
                    
                return (
                        <View style={cssstyles1}>
                            <View style={cssstyles2}>
                                <Text>{a}</Text>
                            </View>

                    )   
                }else{
                    return (
                        <View style={cssstyles1}>
                            <View style={cssstyles2}>
                                <Text>{a}</Text>
                            </View>

                    )   
                }
                }
            )}
            <Text>{result}</Text>
        </View>        

Answer 1

请记住，React代码就是那个代码。

您始终可以用更直观的方式来重新组织代码，例如将答案列表拆分为二维数组，然后对其进行循环。