可控的 React Bootstrap Carousel 组件不工作

Question

这是我在底部收到错误的组件中的代码。

这是我从https://react-bootstrap.github.io/components/carousel/获得可控轮播代码的地方

有人知道我为什么会收到这个错误吗？我看不出 handleSelect 方法是怎么错的……

import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel'


class CarouselComponent extends Component {

    setIndex = (selectedIndex) => {
    this.setState({index: selectedIndex})
    }   

    setDirection = (direction) => {
        this.setState({direction: direction})
    }

    handleSelect = (selectedIndex, e) => {
        this.setIndex(selectedIndex);
        this.setDirection(e.direction);
    }

    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            setIndex: 0,
            direction: null,
            setDirection: null
        };
    }

    render() {
        const { index, direction } = this.state;
        return (
            <div>
                <Carousel activeIndex={index} direction={direction} onSelect={this.handleSelect}>
                    <Carousel.Item>
                        <img
                            className="d-block w-100"
                            src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fnapipelines.com%2Fwp-content%2Fuploads%2F2014%2F11%2FKomatsu-PC210LCi-10.jpg&f=1&nofb=1" alt="First slide"
                        />
                        <Carousel.Caption>
                            <h3>First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img
                            className="d-block w-100"
                            src="holder.js/800x400?text=Second slide&bg=282c34"
                            alt="Second slide"
                        />

                        <Carousel.Caption>
                            <h3>Second slide label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img
                            className="d-block w-100"
                            src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.volvoce.com%2F-%2Fmedia%2Fvolvoce%2Fglobal%2Fproducts%2Fexcavators%2Fcrawler-excavators%2Fhero%2Fvolvo-show-crawler-excavator-ec750e-t4f-2324x1200.jpg%3Fmh%3D620%26mw%3D1205%26v%3DIP4tPw%26c%3D1%26cw%3D1200%26ch%3D620%26jq%3D80%26hash%3DD74491474FE2F6213A24E81C13AF995AD8D41A0D&f=1&nofb=1" alt="Third slide"
                        />

                        <Carousel.Caption>
                            <h3>Third slide label</h3>
                            <p>
                                Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
                        </Carousel.Caption>
                    </Carousel.Item>
                </Carousel>

            </div>
        );
    }

}


export default CarouselComponent;

这是我遇到的错误。

./src/components/CarouselComponent.jsx
  Line 7:  Parsing error: Unexpected token

   5 | class CarouselComponent extends Component {
   6 | 
>  7 |    function handleSelect(selectedIndex, e) {
     |             ^
   8 |     setIndex(selectedIndex);
   9 |     setDirection(e.direction);
  10 | }

Answer 1

语法错误。看看下面的sn-p。

import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel'


class CarouselComponent extends Component {

    setIndex = () => {
    //Implement method
    }

     setDirection = () =>  {
        //Implement method
     }

   handleSelect = (selectedIndex, e) => {
    this.setIndex(selectedIndex);
    this.setDirection(e.direction);
    }

constructor(props) {
    super(props);
    this.state = {
        index: 0,
        setIndex: 0,
        direction: null,
        setDirection: null
    };
}

render() {
    const {index, direction} =  this.state;
    return (
        <div>
    <Carousel interval={false} activeIndex={index} direction={direction} onSelect={this.handleSelect}>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src="holder.js/800x400?text=First slide&bg=373940"
                        alt="First slide"
                    />
                    <Carousel.Caption>
                        <h3>First slide label</h3>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src="holder.js/800x400?text=Second slide&bg=282c34"
                        alt="Second slide"
                    />

                    <Carousel.Caption>
                        <h3>Second slide label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src="holder.js/800x400?text=Third slide&bg=20232a"
                        alt="Third slide"
                    />

                    <Carousel.Caption>
                        <h3>Third slide label</h3>
                        <p>
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>

            </div>
    );
}

}


export default CarouselComponent;