70 lines
2.1 KiB
Markdown
70 lines
2.1 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`, which uses `Component.prototype.setState` 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
|
|
class Collapse extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
collapsed: !!props.collapsed
|
|
};
|
|
this.style = {
|
|
collapsed: {
|
|
display: 'none'
|
|
},
|
|
expanded: {
|
|
display: 'block'
|
|
},
|
|
buttonStyle: {
|
|
display: 'block',
|
|
width: '100%'
|
|
}
|
|
};
|
|
this.toggleCollapse = this.toggleCollapse.bind(this);
|
|
}
|
|
|
|
toggleCollapse() {
|
|
this.setState(state => ({ collapsed: !state.collapsed });
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<button style={this.style.buttonStyle} onClick={this.toggleCollapse}>
|
|
Show/Hide Content
|
|
</button>
|
|
<div
|
|
style= {this.state.collapsed ? this.style.collapsed : this.style.expanded}
|
|
aria-expanded = {this.state.collapsed}
|
|
>
|
|
{this.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 -->
|