javascript - 在 React Native 中计算 JSON 项
问题描述
我想用
for 循环中的变量“i”替换第
9 行和第 14 行(content.card1)
中的数字 1。
这可能吗?这
对我会有很大的帮助。
约翰
感谢您的帮助!
应用程序.js
function App() {
const content = require('./content.json')
var cards = [];
for (let i = 0; i < 4; i++) {
cards.push(
<View style={styles.card} key={i}>
<View style={styles.TitleBox}>
<Text style={styles.title}>
{content.card1.title}
</Text>
</View>
<View style={styles.ContentBox}>
<Text>
{content.card1.content}
</Text>
</View>
</View>
);
}
return(
<ScrollView horizontal={ true } pagingEnabled={ true } showsHorizontalScrollIndicator={ false }>
{cards}
</ScrollView>
);
}
const styles = require('./style');
export default App;
内容.json
{
"cards" : 4,
"card1": {
"type" : "textonly",
"title" : "Card 1",
"content" : "Some Text 1"
},
"card2": {
"type" : "task",
"title" : "Card 2",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
"card3": {
"type" : "task",
"title" : "Card 3",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
"card4": {
"type" : "textonly",
"title" : "Card 4",
"content" : "Some Text 4"
}
}
解决方案
您想使用动态键(即计算属性名称)并生成键"card1"
等"card2"
。使用索引 [1-4] 您想计算卡号 [1-4],即content[`card${i}`]
。
const content = require('./content.json');
function App() {
const cards = [];
for (let i = 1; i <= 4; i++) {
cards.push(
<View style={styles.card} key={i}>
<View style={styles.TitleBox}>
<Text style={styles.title}>
{content[`card${i}`].title}
</Text>
</View>
<View style={styles.ContentBox}>
<Text>
{content[`card${i}`].content}
</Text>
</View>
</View>
);
}
return(
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
>
{cards}
</ScrollView>
);
}
由于您已经控制了 content.json,我建议重新格式化数据以更容易呈现。
{
"length" : 4,
"cards": [
{
"type" : "textonly",
"title" : "Card 1",
"content" : "Some Text 1"
},
{
"type" : "task",
"title" : "Card 2",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
{
"type" : "task",
"title" : "Card 3",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
{
"type" : "textonly",
"title" : "Card 4",
"content" : "Some Text 4"
}
],
}
然后你的代码可以简单地将数据直接映射到 JSX。
const content = require('./content.json');
function App() {
const cards = [];
for (let i = 1; i <= 4; i++) {
cards.push(
);
}
return(
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
>
{content.cards.map((card, i) => (
<View style={styles.card} key={i}>
<View style={styles.TitleBox}>
<Text style={styles.title}>
{card.title}
</Text>
</View>
<View style={styles.ContentBox}>
<Text>
{card.content}
</Text>
</View>
</View>
))}
</ScrollView>
);
}
推荐阅读
- python - 将稀疏矩阵快速插入另一个矩阵
- javascript - 如何调用回调
- c# - System.InvalidOperationException:尝试激活时无法解析服务类型
- vue.js - 在 GmapMap Vue 组件上激活交通层
- angular - EventEmitter 未捕获事件
- spring-boot - 如何加载 @ConditionalOnProperty 设置为 false 的类。?
- python - 在 python sklearn 中加载和使用 XGBoost PMML 或 XGBoost .rds 模型,而不会丢失其依赖项/性质
- c# - c# - 如何在流布局面板拖动中显示自定义用户控件,同时在c#中的Winform中使用移动图标鼠标光标?
- javascript - 如何在 ios 应用程序的 wkwebview 中的 amazon.in 的输入字段中自动填充信用卡/借记卡详细信息?
- java - 从图像中提取文本时分别突出显示文本