react native render foreach循环
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react native render foreach循环相关的知识,希望对你有一定的参考价值。
import React from "react";
import StyleSheet, Text, View from "react-native";
class Lotto extends React.Component
constructor(props)
super(props);
this.state =
count: 6,
maxNum: 45
;
this.lottoSet = this.createLottoNumber();
createLottoNumber()
let lottoSet = new Set();
let rNum;
for (let i = 0; i < this.state.count; i++)
rNum = Math.round(Math.random() * (this.state.maxNum * 1) + 1);
if (lottoSet.has(rNum)) i--;
else lottoSet.add(rNum);
return lottoSet;
render()
return (
<View style=styles.container>
this.lottoSet.forEach(n =>
console.log(`<Text style=styles.item>$n.toString()</Text>`);
return <Text style=styles.item>n.toString()</Text>;
)
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: "#333",
flexDirection: "row",
paddingTop: "10%",
justifyContent: "center"
,
item:
color: "#fff",
textAlign: "center",
width: "100px"
);
export default Lotto;
你好。我是一名学习React的学生。
生成随机数的代码。
我在渲染块内运行了forEach,它通常在控制台,但文本标记未显示在输出中。
怎么了?
答案
forEach
不返回值,但代表对每个数组元素执行副作用。相反,您正在寻找的是map
:
<View style=styles.container>
this.lottoSet.map(n =>
console.log(`<Text style=styles.item>$n.toString()</Text>`);
return <Text key=n.toString() style=styles.item>n.toString()</Text>;
)
</View>
还请注意,我向每个key
元素添加了一个Text
属性,您可以在此处阅读有关的内容:https://reactjs.org/docs/lists-and-keys.html
另一答案
您必须使用map来渲染元素,React是声明性的,并且需要声明视图状态来进行渲染。
render()
return (
<View style=styles.container>
this.lottoSet.map(n => (
<Text style=styles.item>n.toString()</Text>
)
</View>
);
以上是关于react native render foreach循环的主要内容,如果未能解决你的问题,请参考以下文章
使用带有样式组件和主题的 react-test-renderer (React Native)
「React Native」子组件Render中props为空报错问题
REACT NATIVE 系列教程之四刷新组件RENDER(重新渲染)的三种方式详解