我正在显示问题答案列表，这些列表会在触摸时扩展和关闭，但是为此，我正在对这些值进行硬编码，而不是像这样使用数组：
<TouchableOpacity
key={item.heading_category_id}
style={{ backgroundColor: 'white', marginHorizontal: wp(2), height: hp(4), flexDirection: 'row', justifyContent: 'space-between', marginTop: hp(2) }}
onPress={() => this.setState({ should_heading_expand: !this.state.should_heading_expand })}
>
<Text style={{ fontSize: wp(4), color: '#515151', fontWeight: 'bold' }}>
{item.category_title}
</Text>
<Image
source={this.state.should_heading_expand ? require('../../../assets/images/help/up_arrow.png') : require('../../../assets/images/help/down_arrow.png')}
style={{ width: wp(3.5), height: wp(3.5), marginRight: wp(8) }}
/>
</TouchableOpacity>
{this.state.should_heading_expand && (
<View style={{}}>
{
item.array_of_question_answer_dict.map((i, index) => {
console.log("one item of question array is i = ", i)
return (
<Faq
key={i.sequence}
question={i.question}
answer={i.answer}
/>
)
})
}
</View>
)}
从api获取数据后，我更新了状态并希望通过循环数组来动态呈现它。
我以前的UI（用于硬编码值）是最终结果，但是当我从API获取数据时，我需要将其包装在单个组件/视图中，并将其作为一个组合组件返回。
我正在将this.state.arraylist映射到每个组件中，而不是进行硬编码，但是随后UI样式发生了变化，额外包装视图添加了一些default-css（我想删除），它是在此之后，造成一些额外的填充/边距和整个不需要的UI更改：
{this.state.heading_record_array.map((item, index) => {
return (
<View> // this view is giving me problems
<TouchableOpacity
key={item.heading_category_id}
style={{ backgroundColor: 'white', marginHorizontal: wp(2), height: hp(4), flexDirection: 'row', justifyContent: 'space-between', marginTop: hp(2) }}
onPress={() => this.setState({ should_heading_expand: !this.state.should_heading_expand })}
>
<Text style={{ fontSize: wp(4), color: '#515151', fontWeight: 'bold' }}>
{item.category_title}
</Text>
<Image
source={this.state.should_heading_expand ? require('../../../assets/images/help/up_arrow.png') : require('../../../assets/images/help/down_arrow.png')}
style={{ width: wp(3.5), height: wp(3.5), marginRight: wp(8) }}
/>
</TouchableOpacity>
{this.state.should_heading_expand && (
<View style={{}}>
{
item.array_of_question_answer_dict.map((i, index) => {
console.log("one item of question array is i = ", i)
return (
<Faq
key={i.sequence}
question={i.question}
answer={i.answer}
/>
)
})
}
</View>
)}
</View> // this view is giving me problems
)
})}
如何基于状态值为{this.state.should_heading_expand && (<MyDynamicView>)}来包装我的两个组件以及动态显示的其他组件，而又不影响我想要的当前UI样式（当我为每个代码硬编码值时，效果很好-组件？
我尝试过在不包含额外View的情况下显示它，但是按照react的原理，它应该返回单个组件，最多只能返回一个，
我也尝试将其包装在empty-div中，但这是行不通的：
<> <TouchableOpacity/>{conditionalView}</>
我想显示它们，但是新的外部包装导致不同的UI位置，我无法更改。
也是faq组件，它具有自己的CSS，并且在对组件进行硬编码之前可以正常工作。
我也知道，硬编码值是非常糟糕的方法：D