[英]How can I access two separate images in an array of objects and assign it to a third object inside the same array?
I am using a mock data to create a card component, some cards have single image while others have side by side comparison images. 我正在使用模拟数据创建卡组件,有些卡具有单个图像,而另一些则具有并排比较图像。 I have created an array of uploads, the first two objects have an
image
, while for the third object, I need to get access to the image in the first and second object to form my comparisons
object. 我创建了一个上传数组,前两个对象都有一个
image
,而对于第三个对象,我需要访问第一个和第二个对象中的图像以形成comparisons
对象。 How can I achieve that? 我该如何实现? I added some helpful comments.
我添加了一些有用的评论。
import faker from 'faker';
import uuid from 'uuid/v1';
const fakeUploads = [
{
avatar: faker.image.avatar(),
description: faker.lorem.sentences(),
id: uuid(),
image: faker.image.avatar(),
},
{
avatar: faker.image.avatar(),
description: faker.lorem.sentences(),
id: uuid(),
image: faker.image.avatar(),
name: faker.name.findName(),
},
{
avatar: faker.image.avatar(),
comparisons: { // Object.keys(comparison) => [0, 1]
//Access to the two images in the above object where `0` is the index of the first image and `1` is the indes of the second
},
description: faker.lorem.sentences(),
id: uuid(),
name: faker.name.findName(),
},
];
I have already mapped out the values of the mock upload, so in my component I want to have something like 我已经映射了模拟上传的值,所以在我的组件中我想要类似
values.includes(comparisons)?
<span>
<img width="50%" alt={UPLOAD} src={comparisons.image[0]} />
<img width="50%" alt={UPLOAD} src={comparisons.image[1]} />
</span> : <img alt={UPLOAD} src={image} />
You could do it by adding the third object to the array in scope. 您可以通过将第三个对象添加到作用域数组中来实现。
import faker from 'faker';
import uuid from 'uuid/v1';
const fakeUploads = [
{
avatar: faker.image.avatar(),
description: faker.lorem.sentences(),
id: uuid(),
image: faker.image.avatar(),
},
{
avatar: faker.image.avatar(),
description: faker.lorem.sentences(),
id: uuid(),
image: faker.image.avatar(),
name: faker.name.findName(),
}
]
fakeUploads.push({
avatar: faker.image.avatar(),
comparisons: {[fakeUploads[0].image, fakeUploads[1].image]},
description: faker.lorem.sentences(),
id: uuid(),
name: faker.name.findName(),
})
Is that what you're looking for? 那是您要找的东西吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.