我有一个项目列表,每个项目都有一个 body 和一个 source 。目前,它的呈现方式如下:
const ListItem = (props) => {
const {body, source} = props.context;
return (
<View style={styles.item}>>
<View style={{backgroundColor: 'lightblue'}}>
<Text style={styles.body}>{body}</Text>
</View>
<View style={{backgroundColor: 'lightyellow'}}>
<Text style={styles.source}>{source}</Text>
</View>
</View>
);
}
很多嵌套和容器。可以做得更好吗?
答案 0 :(得分:1)
我将发表我的评论作为答案。
以前的评论:
我想这取决于您的设计,AFAIK在React Native中很好,前提是您使用的是一种优化的呈现列表的方式(例如,使用FlatList或类似方法)
根据您的以下评论,我认为这完全不是可怕的。
这是另一种选择。但是,出于可读性考虑,我更喜欢您在问题中发布的摘录。
const ListItem = props => {
const items = [
{ key: 'body', backgroundColor: 'lightblue' },
{ key: 'source', backgroundColor: 'lightyellow' }
];
return (
<View style={styles.item}>
{
items.map(({ key, backgroundColor }) =>
<View style={{ backgroundColor }}>
<Text style={styles[key]}>
{ props[key] }
</Text>
</View>
)
}
</View>
)
}
答案 1 :(得分:0)
“文本”组件的确使用backgroundColor,因此您可以放开两个视图:
<View style={styles.item}>
<Text style={[styles.body, {backgroundColor: '...'}]}>{body}</Text>
<Text style={[styles.source, {backgroundColor: '...'}]}>{source}</Text>
</View>
另外,我不知道styles.item的组成,但是如果要一直进行下去,可以用React.Fragment替换另一个容器View。