在屏幕上未显示子组件时呈现道具

-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

在屏幕上未显示子组件时呈现道具

回答

相关问题