创建一个可折叠的卡片组件

Question

我想在不同的卡片中展示几种不同类型的信息。每一张卡片，都需要能够在点击标题时打开和关闭。

到目前为止，我写了一段代码：

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
// Importing Styles
import './styles.scss';
class CardToggle extends Component {
static propTypes = {
title: PropTypes.string.isRequired
};
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick = () => {
this.setState({
isOpen: !isOpen
});
};
render() {
const { title } = this.props;
return (
<div className="card my-2 border-0 rounded-0">
<div className="card-body d-flex">
<h4>
<a className="text-secondary" href="">
{title}
</a>
</h4>
</div>
</div>
);
}
}
export default CardToggle;

不过我有一些问题。存在关于未定义handleToggleClick的错误。此外，我在这个组件中使用的每个组件都没有被放置在卡体中：它被放置在下面。。。

因此，我需要将我想要使其出现和消失的组件的内容实际放置在组件中，并使折叠组件工作。

我使用纯Bootstrap 4类，用于卡片、页眉和文本，并且我希望使用纯react来实现打开/关闭…的功能。。。。

下面是一个我想插入卡片组件的示例组件：

import React, { Component } from 'react';
import CardToggle from '../CardToggle';
import { ThePermissions } from '../../constants';
class Permissions extends Component {
render() {
return (
<div>
<CardToggle title="Permissions" />
<button className="btn btn-primary">Submit</button> // From 
here it is outside the card
<div>
More Content here
</div>
</div>
);
}
}
export default Permissions;

谁能帮我一把吗。我不想使用库，我希望组件是可重用的。我还想在已经很大的主概览屏幕中处理关于show/hide的附加逻辑。

如果你也想看，就给我打电话。

Answer 1

1.对于未定义的错误，而不是

handleToggleClick = () => {
this.setState({
isOpen: !isOpen
});
};

尝试

handleToggleClick() {
this.setState({
isOpen: !isOpen
});
}

2.对于没有出现在组件内部的内容，请尝试：

render() {
const { title, children } = this.props;
return (
<div className="card my-2 border-0 rounded-0">
<div className="card-body d-flex">
<h4>
<a className="text-secondary" href="">
{title}
</a>
</h4>
<div className="/*some class*/">
{children} // this is where the content will be shown 
</div>
</div>
</div>
);
}