如何在 React 中用卡片组件替换面板组件答案

【问题标题】：How to replace Panel Component with Card Component in React如何在 React 中用卡片组件替换面板组件
【发布时间】：2020-12-08 05:36:22
【问题描述】：

我已经将 bootstrap 从 v3.X.x 更新到 v4.x.x 并将 react-bootstrap 更新到 0.32.X 到 1.4.0，现在我遇到了面板组件的问题。

根据 bootstrap 文档 Panel 组件已从最新的 bootstrap 中移除，可以替换为 Card 组件。

谁能帮我用卡片组件

更新下面的面板组件

这是我现有的代码：

import * as React from 'react';
import { Panel } from 'react-bootstrap';

<Panel>
    <Panel.Heading style={{ padding: "10px" }}>
        <Panel.Title componentClass="h3" toggle>                                         
            Panel Test
        </Panel.Title>
    </Panel.Heading>
    <Panel.Collapse> 
        <Panel.Body>
           <p> Test Body </p>
        </Panel.Body>
    </Panel.Collapse>
</Panel>

Card.Heading 和 Card.Collapse 目前不可用，我们可以用卡片替换其他代码，例如 Card.Body 或 Card.Title

【问题讨论】：

请参考文档老兄react-bootstrap.github.io/components/cards，如果没有，它就足够清楚了，然后问我，我会尝试发布代码
包含您尝试使用Card 组件的代码并说明您的问题所在
@GayatriDipali 链接可帮助我将 Panel.Heading 替换为 Card.Header，但也需要折叠代码

标签： reactjs bootstrap-4 react-bootstrap

【解决方案1】：

这就是更换组件的方式。对于折叠，我使用了Accordian

Panel -> Card
Panel.Heading -> Card.Header
Panel.Title -> Card.Title
Panel.Collapse -> Accordion.Collapse

属性componentClass重命名为as

这是最终代码

import * as React from 'react';
import { Card, Accordion } from 'react-bootstrap';

<Accordion defaultActiveKey="0">
    <Card>
        <Accordion.Toggle as={Card.Header} variant="link" eventKey="0" style={{ padding: "10px" }}>
            <Card.Title as="h3" toggle>                                         
                Panel Test
            </Card.Title>
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0"> 
            <Card.Body>
                 <p> Test Body </p>
            </Card.Body>
        </Accordion.Collapse>
    </Card>
</Accordion>

【讨论】：

【解决方案2】：

很抱歉我没有注意到，但是你可以用 react-bootstrap 的手风琴折叠来达到同样的效果，你可以将它包含在你的卡片组件中，折叠手风琴的链接：https://react-bootstrap.netlify.app/components/accordion/#accordion-collapse-props

【讨论】：

如果您有问题，请告诉我，我会放上代码