[英]How to repeat one element in JSX?
I want repeat one image element in JSX, my required code is like as below: 我想在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>
How i can use a loop to generate this code? 我如何使用循环生成此代码?
Easy! 简单! You can create an array on the fly.
您可以动态创建阵列。 Like this:
像这样:
<View>
{[...Array(5)].map((x, i) => <Image key={i} source={require('../images/image.png')} />)}
</View>
The [...Array(5)]
gives: [undefined, undefined, undefined, undefined, undefined]
. [...Array(5)]
给出: [undefined, undefined, undefined, undefined, undefined]
。 Which might look useless, but actually, this gives us something to iterate over with map()
which we can use to return the Components we want (we don't need x
here at all). 这可能看起来毫无用处,但实际上,这给了我们一些东西来迭代
map()
,我们可以用它来返回我们想要的组件(我们根本不需要x
)。
You could, to improve performance, create the array outside your render to prevent re-creating the temporary array on each re-render. 为了提高性能,您可以在渲染外部创建数组,以防止在每次重新渲染时重新创建临时数组。 You can also put your
require
separately for similar reasons. 出于类似原因,您也可以单独提出
require
。
You can store it in a variable before you return your jsx. 在返回jsx之前,可以将其存储在变量中。
Example: 例:
const myjsx = [];
for(let i = 0; i < 4; i++) {
myjsx.push(<Image source={require('../images/image.png')} />);
}
then in your final JSX you simply print out the {myjsx} 然后在你的最终JSX中你只需打印出{myjsx}
<View>
{myjsx}
</View>
You can create a short function to do this for you 您可以创建一个简短的函数来为您执行此操作
let func = () => (<Image source={require('../images/image.png')} />) <View> {func()} {func()} {func()} {func()} {func()} </View>
You can add a loop or perform additional refactorings from there. 您可以从那里添加循环或执行其他重构。
Try this: 尝试这个:
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>
You can create a function that loops and returns the elements in question. 您可以创建一个循环并返回相关元素的函数。
renderImages() {
var images = [];
for (var i = 0; i < numrows; i++) {
images.push(<Image source={require('../images/image.png')} />);
}
return images;
}
In the render method you would just call the function name as such: 在render方法中,您只需调用函数名称:
{renderImages()}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.