时间戳

首页 > 解决方案 > 在 React Native 中计算 JSON 项

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"
    }
}

标签： javascriptreactjsreact-nativejsx

解决方案

您想使用动态键（即计算属性名称）并生成键"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>
  );
}

推荐阅读