在视图组件中使用字符串变量会导致"Unexpected text node"

Question

我是反应原生和java脚本的新手。我想使用反应原生(带有 expo(设计一个简单的计算器，这是我用于显示按钮的渲染：

render() {
let views = [];
for (var i = 0; i < inputButtons.length; i++) {
let row = inputButtons[i];
let rowViews = [];
for (var j = 0; j < row.length; j++) {
rowViews.push(
<View style={styles.button} key={"r" + i + "c" + j}>
{row[j]}
</View>
);
}
views.push(<View style={styles.buttonRow} key={"r" + i}>{rowViews}</View>);
}
return (<View style={styles.containter}>{views}</View>);
}

当我在inputButttons变量中只有数字时，一切都很好：

const inputButtons = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[0]
];

但是当我添加这样的字符或字符串时，它会给我错误：

const inputButtons = [
[1, 2, 3, '/'],
[4, 5, 6, '*'],
[7, 8, 9, '-'],
[0, '.', '=', '+']
];

×
←→1 of 6 errors on the page
Unexpected text node: +. A text node cannot be a child of a <View>.
▶ 22 stack frames were collapsed.
fn
src/components/NumberButtons/index.js:40
37 |       views.push(<View style={styles.buttonRow} key={"r" + i}>{rowViews}</View>);
38 |     }
39 | 
> 40 |     return (<View style={styles.containter}>{views}</View>);
41 |   }
42 | }
43 | 
View compiled
▶ 4 stack frames were collapsed.

如果有人告诉我这有什么问题，我会很高兴。

Answer 1

将字符串放入标签内

<View style={styles.button} key={"r" + i + "c" + j}>
<Text>{row[j]}</Text>
</View>