在屏幕上未显示子组件时呈现道具
问题描述:
我是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};
我没有收到日志或控制台中的任何错误或警告,所以我真的不知道为什么这不是渲染。有一个更好的方法吗?
答
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>
)))]
}
答
您应该使用地图,而不是的forEach。原因,forEach不返回值,该工作只是迭代你的数组或迭代对象。但是map会返回一个包含你的逻辑输出的数组。
如果反应组件呈现需要单个组件实例或组件实例的数组。
谢谢你,尤里。这使得更多的意义! :) – LWNZ
@LaurieWilliams没问题。顺便说一句,你可能还想检查'props [key]'是否是数组。 –