我怎样才能显示我的 card Item
根据 project_type
将在数组中可用。
例如,如果 type
是 Reactjs
它将显示在第一个标签页中,或者在第二个标签页中,使用 projects.filter(project => project.project_type === "Reactjs"
有什么建议,我需要在这里做什么?
/project.js
class Projects extends Component{
constructor(props){
super(props);
this.state={activeTab: 0};
}
static propTypes = {
getProject: PropTypes.func.isRequired,
deleteProject: PropTypes.func.isRequired,
resume: PropTypes.object.isRequired,
isAuthenticated: PropTypes.bool,
auth: PropTypes.object.isRequired,
loading: PropTypes.object.isRequired
}
componentDidMount() {
this.props.getProject();
}
onDeleteProjectClick = (id) => {
this.props.deleteProject(id);
};
toggleCategories(projects, user){
if(this.state.activeTab === 0 &&projects.filter(project => project.project_type === "Reactjs" ){
return (
<div>
{projects.map(({ _id, project_type, project_name, project_description, project_link, project_image_link }) => (
<Grid key={_id} timeout={100} className="projects-grid" >
<Card shadow={5} className="cards-grid">
<CardTitle style={{color:'#fff', height:'176px', background:"url("") center/cover"}}>{project_name}</CardTitle>
<CardText>
{project_description}
</CardText>
<CardActions border>
<Button colored><a href={project_link} target="_blank">Live</a></Button>
<Button colored><a href="" target="_blank">Github</a></Button>
</CardActions>
</Card>
</Grid>
))}
</div>
)
}else if(this.state.activeTab === 1 && projects.filter(project => project.project_type === "Html" ){
return(
<div>
{projects.map(({ _id, project_type, project_name, project_description, project_link, project_image_link }) => (
<Grid key={_id} timeout={100} className="projects-grid" >
<Card shadow={5} className="cards-grid">
<CardTitle style={{color:'#fff', height:'176px', background:"url("") center/cover"}}>{project_name}</CardTitle>
<CardText>
{project_description}
</CardText>
<CardActions border>
<Button colored><a href={project_link} target="_blank">Live</a></Button>
<Button colored><a href="" target="_blank">Github</a></Button>
</CardActions>
</Card>
</Grid>
))}
</div>
)
}
}
render(){
const { projects, loading} = this.props.resume;
const { user } = this.props.auth;
return(
<Container>
{loading ? (
<div><Loading/></div>) :
( <div className="category-tabs">
<Tabs activeTab ={this.state.activeTab} onChange={(tabId) => this.setState({activeTab: tabId})} ripple>
<Tab> React/Node </Tab>
<Tab> HTML/CSS/JS </Tab>
</Tabs>
<Grid >
<Cell col={12}>
{this.toggleCategories(projects, user)}
</Cell>
</Grid>
</div> )}
</Container>
)
}
}
const mapStateToProps = (state) => ({
resume: state.resume,
isAuthenticated : state.auth.isAuthenticated,
auth: state.auth,
loading: state.apiCallsInProgress > 0
});
export default connect(mapStateToProps, {getProject, deleteProject }) (Projects);
/JSOn数组
[
{
"_id": "5e9b2ca0e02bb43b2c3dee9c",
"project_type": "Html",
"project_name": "abc",
"project_description": "abc",
"project_link": "example.com",
"project_image_link": "example.com",
"date": "2020-04-18T16:36:48.902Z",
"__v": 0
},
{
"_id": "5e9b2c91e02bb43b2c3dee9b",
"project_type": "Reactjs",
"project_name": "abc",
"project_description": "abc",
"project_link": "example.com",
"project_image_link": "example.com",
"date": "2020-04-18T16:36:33.901Z",
"__v": 0
}
]
如果-else在活动的选项卡上,然后过滤。和 相应的映射。
toggleCategories(projects, user) {
if (this.state.activeTab === 0) {
return projects
.filter(project => project.project_type === "Reactjs")
.map(
({
_id,
project_type,
project_name,
project_description,
project_link,
project_image_link
}) => (
<Grid key={_id} timeout={100} className="projects-grid">
<Card shadow={5} className="cards-grid">
<CardTitle
style={{
color: "#fff",
height: "176px",
background: 'url("") center/cover'
}}
>
{project_name}
</CardTitle>
<CardText>{project_description}</CardText>
<CardActions border>
<Button colored>
<a href={project_link} target="_blank">
Live
</a>
</Button>
<Button colored>
<a href="" target="_blank">
Github
</a>
</Button>
</CardActions>
</Card>
</Grid>
)
);
}
return projects
.filter(project => project.project_type === "Html")
.map(
({
_id,
project_type,
project_name,
project_description,
project_link,
project_image_link
}) => (
<Grid key={_id} timeout={100} className="projects-grid">
<Card shadow={5} className="cards-grid">
<CardTitle
style={{
color: "#fff",
height: "176px",
background: 'url("") center/cover'
}}
>
{project_name}
</CardTitle>
<CardText>{project_description}</CardText>
<CardActions border>
<Button colored>
<a href={project_link} target="_blank">
Live
</a>
</Button>
<Button colored>
<a href="" target="_blank">
Github
</a>
</Button>
</CardActions>
</Card>
</Grid>
)
);
}
但可以看到,滤镜后的一切都相同,并没有很 干燥. 你可以可以做标签 和 在过滤功能和地图中同时显示项目类型。
toggleCategories(projects, user) {
return projects
.filter(project =>
this.state.activeTab === 0
? project.project_type === "Reactjs"
: project.project_type === "Html"
)
.map(
({
_id,
project_type,
project_name,
project_description,
project_link,
project_image_link
}) => (
<Grid key={_id} timeout={100} className="projects-grid">
<Card shadow={5} className="cards-grid">
<CardTitle
style={{
color: "#fff",
height: "176px",
background: 'url("") center/cover'
}}
>
{project_name}
</CardTitle>
<CardText>{project_description}</CardText>
<CardActions border>
<Button colored>
<a href={project_link} target="_blank">
Live
</a>
</Button>
<Button colored>
<a href="" target="_blank">
Github
</a>
</Button>
</CardActions>
</Card>
</Grid>
)
);
}