使用 react-bootstrap 手风琴时如何扩展单个卡

Question

当使用 react-boostrap 手风琴时，我有一组列当前正在扩展所有卡片。我想在单击每个单独的链接时展开每个单独的卡片，但在如何实现这一点时遇到了一些困难。任何帮助将不胜感激。

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

Answer 1

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

希望对你有帮助