如何在 React 中用 Card 组件替换 Panel 组件

Question

我已将 bootstrap 从 v3.X.x 更新为 v4.x.x 并将 react-bootstrap 更新为 0.32.X 为 1.4.0, 现在我面临面板组件的问题。

根据 bootstrap 文档面板组件已从最新的 bootstrap 中删除，可以由卡片组件替换。

谁能帮我更新下面的面板组件和卡片组件

这是我现有的代码:

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

等卡片替换其他代码

Answer 1

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

Answer 2

这是替换组件的方式。对于折叠，我使用了 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>

如何在 React 中用 Card 组件替换 Panel 组件

How to replace Panel Component with Card Component in React

reactjs

react-bootstrap

bootstrap-4