89 lines
2.4 KiB
Markdown
89 lines
2.4 KiB
Markdown
### Carousel
|
|
|
|
Renders a carousel component.
|
|
|
|
Initially set `state.active` to `0` (index of the first item).
|
|
Use an object, `style`, to hold the styles for the individual components.
|
|
Define a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
|
|
Define another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
|
|
first renders (on `ComponentDidMount`).
|
|
In the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
|
|
Render the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
|
|
`props` along with the computed styles.
|
|
|
|
```jsx
|
|
class Carousel extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
active: 0
|
|
};
|
|
this.scrollInterval = null;
|
|
this.style = {
|
|
carousel: {
|
|
position: "relative"
|
|
},
|
|
carouselItem: {
|
|
position: "absolute",
|
|
visibility: "hidden"
|
|
},
|
|
visible: {
|
|
visibility: "visible"
|
|
}
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
this.changeItem();
|
|
}
|
|
setActiveItem = () => {
|
|
const { carouselItems } = this.props;
|
|
this.setState(
|
|
prevState => ({
|
|
active: (prevState.active + 1) % carouselItems.length
|
|
}),
|
|
this.changeItem
|
|
);
|
|
};
|
|
changeItem = () => {
|
|
this.scrollInterval = setTimeout(this.setActiveItem, 2000);
|
|
};
|
|
render() {
|
|
const { carouselItems, ...rest } = this.props;
|
|
const { active } = this.state;
|
|
const { visible, carousel, carouselItem } = this.style;
|
|
return (
|
|
<div style={carousel}>
|
|
{carouselItems.map((item, index) => {
|
|
const activeStyle = active === index ? visible : {};
|
|
return React.cloneElement(item, {
|
|
...rest,
|
|
style: {
|
|
...carouselItem,
|
|
...activeStyle
|
|
}
|
|
});
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
```jsx
|
|
ReactDOM.render(
|
|
<Carousel
|
|
carouselItems={[
|
|
<div>carousel item 1</div>,
|
|
<div>carousel item 2</div>,
|
|
<div>carousel item 3</div>
|
|
]}
|
|
/>,
|
|
document.getElementById("root")
|
|
);
|
|
```
|
|
|
|
<!-- tags: visual,children,state,class -->
|
|
|
|
<!-- expertise: 2 -->
|
|
|