64 lines
1.8 KiB
Markdown
64 lines
1.8 KiB
Markdown
### Collapse
|
|
|
|
Renders a component with collapsible content.
|
|
|
|
Use the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded).
|
|
Set the `state` of the component to the value of the `collapsed` prop (cast to a boolean value) and bind the `toggleCollapse` method to the component's context.
|
|
Use an object, `style`, to hold the styles for individual components and their states.
|
|
Create a method, `toggleCollapse` to change the component's `state` from collapsed to expanded and vice versa.
|
|
In the `render()` method, use a `<div>` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`.
|
|
Determine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.
|
|
Finally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.
|
|
|
|
```jsx
|
|
const style = {
|
|
collapsed: {
|
|
display: "none"
|
|
},
|
|
expanded: {
|
|
display: "block"
|
|
},
|
|
buttonStyle: {
|
|
display: "block",
|
|
width: "100%"
|
|
}
|
|
};
|
|
|
|
function Collapse(props) {
|
|
const [isCollapsed, setCollapsed] = useState(props.collapsed);
|
|
|
|
const toggleCollapse = () => {
|
|
setCollapsed(!isCollapsed);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<button style={style.buttonStyle} onClick={() => toggleCollapse()}>
|
|
{isCollapsed ? "Show" : "Hide"} content
|
|
</button>
|
|
<div
|
|
className="collapse-content"
|
|
style={isCollapsed ? style.collapsed : style.expanded}
|
|
aria-expanded={isCollapsed}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
```jsx
|
|
ReactDOM.render(
|
|
<Collapse>
|
|
<h1>This is a collapse</h1>
|
|
<p>Hello world!</p>
|
|
</Collapse>,
|
|
document.getElementById('root')
|
|
);
|
|
```
|
|
|
|
<!-- tags: visual,children,state,class -->
|
|
|
|
<!-- expertise: 2 -->
|