Question

我是React Native的新手，我创建了一个无状态组件来遍历道具，道具是每个包含标签数组的对象。

然后我从每个数组项返回一个标记。（控制台登录截图）

然而，当我调用函数renderTags（）并尝试返回{tag}时，没有任何内容呈现给屏幕。

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

我没有在日志或控制台中收到任何错误或警告，所以我真的不确定为什么这不会渲染。有更好的方法吗？

Answer 1

当前实施的

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>
    )))]

}

Answer 2

您应该使用map而不是forEach。原因，forEach不返回值，只是迭代你的数组或可迭代对象。但map返回一个包含逻辑输出的数组。

如果react组件呈现需要单个组件实例或组件实例数组。

渲染未在屏幕上显示的子组件中的道具

2 个答案: