React 如何实现崩溃？答案

【问题标题】：React How to implement collapse?React 如何实现崩溃？
【发布时间】：2022-08-15 00:21:30
【问题描述】：

我添加了崩溃但我没有得到回应你能帮我吗怎么崩溃？我单击按钮，示例更改，但文本或图像未打开我在哪里做错了？

index.js

import ReactDOM, { render } from \'react-dom\';

import Card from \'./components/Card\';
import Collapse from \'./components/Collapse\';


const App = () => {

    return (
        <div>
            <div className=\"card-group\">

                <Collapse href=\"collapseExample1\">
                    Pure Collapse Content NO CARD
                </Collapse>

    
                <Collapse href=\"collapseExample2\">
                <Card 
                    cardTitle=\"Card Title II\"
                    cardText=\"Lorem Ipsum Text II\"
                    updatedTime=\"Last Updated 2 min ago\"
                    image=\"https://picsum.photos/id/10/200/300\"
                />
                </Collapse>


                <Card 
                    cardTitle=\"Card Title III\"
                    cardText=\"Lorem Ipsum Text III\"
                    updatedTime=\"Last Updated 3 min ago\"
                    image=\"https://picsum.photos/id/100/200/300\"
                />

            </div>

        </div>
    );
}


ReactDOM.render(
    <App />,
    document.getElementById(\'root\')  
);```

标签： reactjs

【解决方案1】：

和

Collapse.js


const Collapse = (props) => {
    console.log (props.children)
    return (
        <div>

            <a className="btn btn-primary" data-bs-toggle="collapse" href={"#".concat(props.href)} role="button" aria-expanded="false" aria-controls="collapseExample">
                Link with href
            </a>

            <div className="collapse" id={props.href}>
                {props.children}
            </div>
        </div>
    );
};

export default Collapse;```

【讨论】：