在屏幕上未顯示子組件時呈現道具

-1

我是React Native的新手，我製作了一個無狀態組件來循環顯示每個包含標籤數組的對象。在屏幕上未顯示子組件時呈現道具

然後我從每個數組項中返回一個標籤。（控制檯登錄截圖）

然而，當我調用函數renderTags（），並嘗試返回{}標籤沒有被渲染到屏幕上。

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

    const Tags = (props) => { 
     console.log('props', props); 
     function renderTags() { 
     // Loop over each object. Object contains an array. 
     for (let i of Object.keys(props)) { 
      console.log(props[i]); 
      // Loop over each array item to return a single tag 
      props[i].forEach(tag => { 
      console.log(tag); 
      return (
       <TouchableHighlight style={{backgroundColor: '#ede7f6', 
       borderRadius: 4, 
       paddingTop: 4, 
       paddingBottom: 4, 
       paddingRight: 4, 
       paddingLeft: 4, 
       marginRight: 4}}> 
       <Text style={{ fontSize:12 }}>{tag}</Text> 
       </TouchableHighlight> 
      ); 
      }); 
     } 
     } 
     return (
     <View style={{flexDirection: 'row', marginTop: 10}}> 
      {renderTags()} 
     </View> 
    ); 
    }; 
    export {Tags};

我沒有收到日誌或控制檯中的任何錯誤或警告，所以我真的不知道爲什麼這不是渲染。有一個更好的方法嗎？

來源

2017-06-29 LWNZ

renderTags當前實施的返回undefined。從forEach返回沒有意義。

應該是這樣的

function renderTags() { 
    return [...Object.keys(props).map(key => props[key].map(tag => (
     <TouchableHighlight style={{backgroundColor: '#ede7f6', 
       borderRadius: 4, 
       paddingTop: 4, 
       paddingBottom: 4, 
       paddingRight: 4, 
       paddingLeft: 4, 
       marginRight: 4}}> 
       <Text style={{ fontSize:12 }}>{tag}</Text> 
       </TouchableHighlight> 
    )))] 

}

來源

2017-06-29 12:15:43

謝謝你，尤里。這使得更多的意義！ :) – LWNZ

@LaurieWilliams沒問題。順便說一句，你可能還想檢查'props [key]'是否是數組。 –

您應該使用地圖，而不是的forEach。原因，forEach不返回值，該工作只是迭代你的數組或迭代對象。但是map會返回一個包含你的邏輯輸出的數組。

如果反應組件呈現需要單個組件實例或組件實例的數組。

來源

2017-06-29 13:38:59 Vasi

在屏幕上未顯示子組件時呈現道具

回答

相關問題