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

tom*_*msk 6 javascript reactjs react-native

我想使用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>
        );
    }
}
Run Code Online (Sandbox Code Playgroud)

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

Cev*_*mic 9

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

// Remove this comment
 { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}
Run Code Online (Sandbox Code Playgroud)

也许 RN 将其视为插入注释的纯文本。