时间戳

首页 > 解决方案 > 环形通过数组并在本机反应中并排显示

javascript - 环形通过数组并在本机反应中并排显示

问题描述

我有一个数组，其中填充了一个包含两个键的对象，即 HTML 标签的名称作为name和 text 作为text。我正在遍历数组的所有对象，然后将object['name']与固定标签名称进行比较，例如strong 、 h1 、 h2 、 pre 、 var并使用具有我喜欢的样式的组件显示文本内容每个如果像这样阻止：

     const TagSelector = function(tagName , $text , $key){
  
        if(tagName == "strong"){
            return <Text  key={$key} style={{ fontWeight: 'bold' , paddingHorizontal:3 , paddingVertical:10}}>{$text}</Text>
        }

        if(tagName == "h1"){
          return <H2 key={$key} >{$text}</H2>
        }

        if(tagName == "h2"){
           return <H3 key={$key} style={{paddingHorizontal:5 , paddingVertical:5 }}>{$text}</H3>
        }

        if(tagName == "pre"){
           return <Text  key={$key} style={{ fontSize:11 , paddingHorizontal:7 , paddingVertical:7 ,  borderColor: '#d8d7d7', borderWidth: 1 , backgroundColor:'#eee' ,   borderRadius:10, margin:5 }}>{$text}</Text>
        }

        if(tagName == "var"){
            return <View style={{flexDirection:'row', flexWrap:'wrap' ,  justifyContent:'space-between'}}><Text key={$key} style={{backgroundColor:'red' , color:'black' }}>{$text}</Text> 
           </View> 
        }
     }

我的对象：

         var collection = [{
            "name": "p",
            "text": "Keywords are ..... . For example:"
         }, {
            "name": "var",
            "text": "int"
         }, {
            "name": "var",
            "text": " money;"
         }, {
            "name": "var",
            "text": "Here, "
         },
         {
            "name": "strong",
            "text": "This is fine "
         }]

循环功能：

     const ContentScreen = () => {
         return <ScrollView style={{paddingHorizontal:12, marginTop:10}}>
               {
                 collection.map((con , index)=>{
                  return TagSelector(con.name , con.text , index+'_Tags');
               })
          }
          </ScrollView>
     }

问题 ：

在var的情况下，我想创建这样的样式，它与第一个字母并排显示Expected Output ：

     Keywords are ...... For example:
     int money; Here,
     **This is fine**

这是我得到的输出

我尝试了什么：

  1. 我浏览了 react native 的官方文档
  2. Stackoverflow 回答 1这个
  3. Stackoverflow 回答 2这个等

我无法解决这个问题，请帮助我。

标签： javascriptreactjsreact-native

解决方案

这是我尝试时得到的输出。

在此处输入图像描述

这是代码：

import React, {useState} from 'react';
import {View, Text} from 'react-native';

const App = () => {
  const [data] = useState([
   {
     name: 'p',
     text: 'Keywords are ..... . For example:',
   },
   {
     name: 'var',
     text: 'int',
   },
   {
     name: 'var',
     text: ' money;',
   },
   {
     name: 'var',
     text: 'Here, ',
   },
   {
     name: 'strong',
     text: 'This is fine ',
   },
 ]);

 const renderElements = () => {
   let jsx = [];
   let varElements = [];

   data.forEach((item) => {
      if (item.name === 'var') {
       varElements.push(<Text>{item.text}</Text>);
      } else {
       if (varElements.length > 0) {
         jsx.push(<View style={{flexDirection: 'row'}}>{varElements}</View>);
       }
       varElements = [];
       jsx.push(<Text>{item.text}</Text>);
     }
   });

   return jsx;
 };

   return <View>{renderElements()}</View>;
};

export default App;

魔法发生在 renderElements 函数内部。

  1. let jsx = []<--- 这是整体生成的 JSX。
  2. let varElements = []<-- 我们在其中临时存储重复出现的 var 元素，然后推送到 JSX。
  3. 我们用 forEach 循环数组并检查每个元素，如果元素是 var 类型，那么我们将其添加到其中，varElements否则我们检查是否已经有一些varElements，然后我们将它们分组并推送到 JSX 数组中<View/>。flexDirection:'row';然后我们清空 varElements 数组并将其他类型的元素推送到 JSX。

推荐阅读