[英]How to expand on an individual card when using react-bootstrap accordion
I have a set of columns that is currently expanding all of the cards when using react-boostrap accordion.在使用 react-boostrap 手风琴时,我有一组列当前正在扩展所有卡片。 I would like to expand each individual card when clicking on each individual link but having some difficulty in how to implement this.
我想在单击每个单独的链接时展开每个单独的卡片,但在如何实现这一点时遇到了一些困难。 Any help will be greatly appreciative.
任何帮助将不胜感激。
import React from 'react'
import Card from 'react-bootstrap/Card'
import CardColumns from 'react-bootstrap/CardColumns'
import { Accordion, Button } from 'react-bootstrap'
import { Link } from "react-router-dom";
const Pcards = ({ projects }) => {
return (
<container>
<div>
<Accordion>
<CardColumns>
{Array.isArray(projects) && projects.map((projects) => (
<Card key={projects.pid}>
<Card.Img variant="top" src={"http://localhost:8000" + projects.images[0].file_path + projects.images[0].file_name + projects.images[0].file_type} alt="Image not found" onError={(e)=>{e.target.onerror = null; e.target.src="/images/no_image.jpg"}} />
<Card.Body>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
<Card.Title>{projects.title}</Card.Title>
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Text>{projects.description}</Card.Text>
</Accordion.Collapse>
</Card.Body>
<Card.Footer>
<Link to={{
pathname: '/project', search: '?pid=' + projects.pid
}}>View Project</Link>
</Card.Footer>
</Card>
))}
</CardColumns>
</Accordion>
</div>
</container>
)
};
export default Pcards
import React from 'react'
import Card from 'react-bootstrap/Card'
import CardColumns from 'react-bootstrap/CardColumns'
import { Accordion, Button } from 'react-bootstrap'
import { Link } from "react-router-dom";
const Pcards = ({ projects }) => {
return (
<container>
<div>
<Accordion>
<CardColumns>
{Array.isArray(projects) && projects.map((project, index) => (
<Card key={project.pid}>
<Card.Img variant="top" src={"http://localhost:8000" + project.images[0].file_path + project.images[0].file_name + project.images[0].file_type} alt="Image not found" onError={(e)=>{e.target.onerror = null; e.target.src="/images/no_image.jpg"}} />
<Card.Body>
<Accordion.Toggle as={Button} variant="link" eventKey={index}>
<Card.Title>{project.title}</Card.Title>
</Accordion.Toggle>
<Accordion.Collapse eventKey={index}>
<Card.Text>{project.description}</Card.Text>
</Accordion.Collapse>
</Card.Body>
<Card.Footer>
<Link to={{
pathname: '/project', search: '?pid=' + project.pid
}}>View Project</Link>
</Card.Footer>
</Card>
))}
</CardColumns>
</Accordion>
</div>
</container>
)
};
export default Pcards
I hope it helps我希望它有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.