[英]How to repeat one element in JSX?
我想在JSX中重复一个图像元素,我需要的代码如下所示:
<View>
<Image source={require('../images/image.png')} />
<Image source={require('../images/image.png')} />
<Image source={require('../images/image.png')} />
<Image source={require('../images/image.png')} />
<Image source={require('../images/image.png')} />
</View>
我如何使用循环生成此代码?
简单! 您可以动态创建阵列。 像这样:
<View>
{[...Array(5)].map((x, i) => <Image key={i} source={require('../images/image.png')} />)}
</View>
[...Array(5)]
给出: [undefined, undefined, undefined, undefined, undefined]
。 这可能看起来毫无用处,但实际上,这给了我们一些东西来迭代map()
,我们可以用它来返回我们想要的组件(我们根本不需要x
)。
为了提高性能,您可以在渲染外部创建数组,以防止在每次重新渲染时重新创建临时数组。 出于类似原因,您也可以单独提出require
。
在返回jsx之前,可以将其存储在变量中。
例:
const myjsx = [];
for(let i = 0; i < 4; i++) {
myjsx.push(<Image source={require('../images/image.png')} />);
}
然后在你的最终JSX中你只需打印出{myjsx}
<View>
{myjsx}
</View>
您可以创建一个简短的函数来为您执行此操作
let func = () => (<Image source={require('../images/image.png')} />) <View> {func()} {func()} {func()} {func()} {func()} </View>
您可以从那里添加循环或执行其他重构。
尝试这个:
const totalImages = 10;
<View>
{
(new Array(totalImages)).fill(<Image source={require('../images/image.png')}/>)
}
</View>
<View>
{() => {
const
longArray = new Array(7),
image = require('../images/image.png');
return longArray.map((k, i) => <Image key={k} source={image} />);
}}
</View>
您可以创建一个循环并返回相关元素的函数。
renderImages() {
var images = [];
for (var i = 0; i < numrows; i++) {
images.push(<Image source={require('../images/image.png')} />);
}
return images;
}
在render方法中,您只需调用函数名称:
{renderImages()}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.