文本节点不能是<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>，我不明白，因为<View>中没有<Text>元素，循环看起来有效。

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将其视为纯文本而不是注释。

Answer 2

在 react 中注释的正确方法是这样的：

{/* your comment goes here*/}

当你用//评论时，React 会把它当作一个文本节点。 除了反应原生文档提及外，我们不能用<View>换行文本。

正确的方法是：

<View>
<Text>
dummy text
</Text>
</View>

错误的方式 ：

<View>
dummy text
</View>

检查反应原生文档