【发布时间】：2016-03-13 21:36:11
【问题描述】：
我是 JavaScript 的初学者，也是 ReactJS 的更大的初学者。我从教程中获取了以下大部分内容，并正在尝试对其进行调整。因此代码显示来自“标签”的所有值（人物、地点、地点等）。它将它显示为内联 li 元素，因为它将成为一个菜单。问题是它显示了所有元素的所有标签。我只想让它捕捉菜单的独特“标签”值（例如人、地点、事物……）。我试过 _.uniq 但它没有显示数组。谢谢。
import React from "react";
import GalleryHeader from './GalleryHeader';
import ImageEntry from './ImageEntry';
import _ from 'lodash';
export default class GalleryImages extends React.Component {
renderItems() {
return _.map(this.props.images, (image, index) => <ImageEntry key={index} {...image} />);
}
renderMenu() {
return _.map(this.props.images, (image, index) => <GalleryHeader key={index} {...image} />);
}
render() {
return (
<div>
<ul class="list-inline">
{this.renderMenu()}
</ul>
{this.renderItems()}
</div>
);
}
}
画廊标题
import React from "react";
export default class GalleryHeader extends React.Component {
render() {
return (
<li>{this.props.tag}</li>
);
}
}
图像存储在：
图库
import React from "react";
import GalleryImages from './Gallery/GalleryImages';
var images = [{
"id": 1,
"tag": "people",
"src": "img/img1.jpg",
"bsrc": "img/img1b.jpg",
"alt": "Some description"
}, {
"id": 2,
"tag": "places",
"src": "img/img2.jpg",
"bsrc": "img/img2b.jpg",
"alt": "Some description"
}, {
"id": 3,
"tag": "places",
"src": "img/img3.jpg",
"bsrc": "img/img3b.jpg",
"alt": "Some place description"
}, {
"id": 4,
"tag": "things",
"src": "img/img4.jpg",
"bsrc": "img/img4b.jpg",
"alt": "Internet of things"
}, {
"id": 5,
"tag": "people",
"src": "img/img5.jpg",
"bsrc": "img/img5b.jpg",
"alt": "A personal person"
}, {
"id": 6,
"tag": "places",
"src": "img/img6.jpg",
"bsrc": "img/img6b.jpg",
"alt": "Interesting place"
}, {
"id": 7,
"tag": "people",
"src": "img/img7.jpg",
"bsrc": "img/img7b.jpg",
"alt": "Tarabaora"
}, {
"id": 8,
"tag": "places",
"src": "img/img6.jpg",
"bsrc": "img/img6b.jpg",
"alt": "Interesting place"
}, {
"id": 9,
"tag": "places",
"src": "img/img6.jpg",
"bsrc": "img/img6b.jpg",
"alt": "Interesting place"
}];
export default class Gallery extends React.Component {
constructor(props) {
super(props);
this.state = {
images,
people: _.filter(images, {tag: "things"}), // or in ES6 just people
sources: _.filter(images, {tag: "src"}),
places: _.filter(images, {tag: "places"}),
cats: _.uniq(images)
};
}
render() {
// This is how you can filter them
var ima = _.filter(images, {tag: "things"});
console.log(ima);
return (
<div className="koko">
<h1>This isGalleryfemCount</h1>
<GalleryImages images={this.state.images} />
</div>
);
}
}
【问题讨论】：
标签： javascript reactjs uniq