javascript - 文本节点不能是 <View> 的子节点

Question

我想使用 ReactJS 创建一个表，所以这是我找到的代码:

import React, { Component } from 'react';
import {
  ScrollView,
  RefreshControl,
  StyleSheet,
  Text,
  SafeAreaView,
  View
} from 'react-native';

export default class Table extends Component {
    renderRow() {
        return (
            <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
                <View style={{ flex: 1, alignSelf: 'stretch' }} /> { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
            </View>
        );
    }

    render() {
        const data = [1, 2, 3, 4, 5];
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            {
                data.map((datum) => { // This will render a row for each data element.
                    return this.renderRow();
                })
            }
            </View>
        );
    }
}

但我收到一条错误消息 A text node cannot be a child of a <View> ，我不明白，因为没有<Text> <View> 中的元素并且循环看起来是有效的。

Answer 1

看来，如果您删除 renderRow() 中的注释，它就可以正常工作:

// Remove this comment
 { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}

也许 RN 将其视为插入评论的纯文本。