React原生幻灯片导航方法？

import React, { Component } from 'react';

class Slide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSlide: 0
    };
  }

  handlePrevSlide = () => {
    this.setState(prevState => ({
      currentSlide: prevState.currentSlide - 1
    }));
  }

  handleNextSlide = () => {
    this.setState(prevState => ({
      currentSlide: prevState.currentSlide + 1
    }));
  }

  render() {
    const { currentSlide } = this.state;
    const slides = this.props.slides;

    return (
      <div>
        <button onClick={this.handlePrevSlide}>Previous</button>
        <button onClick={this.handleNextSlide}>Next</button>
        <div>{slides[currentSlide]}</div>
      </div>
    );
  }
}

export default Slide;

import React from 'react';
import Slide from './Slide';

const slides = [
  'Slide 1',
  'Slide 2',
  'Slide 3'
];

function App() {
  return (
    <div>
      <Slide slides={slides} />
    </div>
  );
}

export default App;