javascript - 使用链接 React-Bootstrap 控制轮播

Question

我正在尝试从导航栏中的链接控制轮播。我现在拥有的是 HomePage 组件（NavBar 和 Carousel 的父组件）中的 click 方法，它根据在 NavBar 中单击的链接更新当前选定索引的状态。我对如何让 Carousel 收听索引状态并在按下链接后移动幻灯片的线索为零。当我最初设置了 activeIndex 时，我无法让它正确地监听作为道具传递的索引，并且 onSelect 处理程序也基本上什么都不做。

更新：主页 => 只是在状态中添加了方向，以在下面的轮播中反映更新 v2 的变化。

class HomePage extends Component {
    constructor(props){
        super(props);
        this.state = {index: '0', direction: null};
    }

    handleclick = (i) => {
        this.setState({direction: (this.state.index>i) ? 'prev':'next', index: i});
    }

    render() {
        return (
            <Container className='containerCustom d-flex h-100 w-100' fluid>
                <Row className='fullscreen-bg h-100 w-100'>
                    <video loop autoPlay className='fullscreen-bg_video w-100 h-100'>   
                        <source src={background} type='video/mp4'/>
                    </video>
                </Row>
                <Row className='flex-fill w-100 navrow' noGutters>
                    <Col className='navCol'>
                        <NavBar handleClick={this.handleclick}/> 
                    </Col>
                    <Col className='carCol d-flex h-100'>
                        <VCarousel index={this.state.index} direction={this.state.direction}/>
                    </Col>
                </Row>
            </Container>
        )
    }
}export default HomePage;

导航栏

const NavBar = (props) => {

    const onSelect = eventKey => {props.handleClick(eventKey)};

    return (
        <Nav className='ribbon flex-column h-100 nav-justified' fill onSelect={onSelect}>
            <Item className='flex-column header nav-fill'>
                <Item><Image className='profpic' src={profpic} roundedCircle/></Item><br></br>
                <Item>Logo</Item>
                <Item id='name'>Name</Item>
                <Item id='contact'>Contact 1</Item>
                <Item id='contact'>Contact 2</Item>
            </Item>
            <Item className='flex-column carousel-links'>
                <Link eventKey={0}>Blogs</Link>
                <Link eventKey={1}>About</Link>
                <Link eventKey={2}>Past Projects</Link>
                <Link eventKey={3}>Current Projects</Link>
            </Item>
        </Nav>
    )
}
export default NavBar;

更新 V1：Carousel => 这个版本只是有条件地放置“活动”类名，但这会杀死 CSS 动画，因为条件不添加它们。当您通过指示器或箭头正常控制它时，我不确定如何临时添加它们或将转换置于 react bootstrap 的方式中。

const VCarousel = (props) => {

    const index = props.index;

    return(
        <Carousel id='vCarousel' className='w-100 h-100 d-flex vert' interval={null} controls={false} indicators={true} touch={false} keyboard={false}>
            <Item id='blank' className={'h-100' + (index == 0 ? ' active':'')}>
                <Container className='w-100 h-100 d-flex'>

                </Container>
            </Item>    
            <Item className={'h-100' + (index == 1 ? ' active':'')}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>About Me</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100' + (index == 2 ? ' active':'')}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Past Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100' + (index == 3 ? ' active':'')}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Current Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
        </Carousel>
    )
}
export default VCarousel;

更新 V2：Carousel => 此版本尝试使用受控轮播的文档版本，但我不确定方向和 onSelect 应该放什么。动画也搞砸了——由于某种原因，carousel-item-left（或右）被应用了两次，然后上一张或下一张幻灯片没有添加任何 className 以使动画正确滑开（而不是完全消失）我有一个 CSS 文件，可以将旋转木马的动画更改为垂直，但我不确定此时该做什么。我也不知道如何处理 onSelect 部分。

const VCarousel = (props) => {

//this part is unused because it doesn't work. activeIndex right now is just using props.index because I don't know how to implement onSelect here
    const [index, setIndex] = useState(0);
    const [direction, setDirection] = useState(null);

    const handleSelect = (selectedIndex, e) => {
        setIndex({index: props.index});
        setDirection({direction: props.direction});
    }

    return(
        <Carousel id='vCarousel' className='w-100 h-100 d-flex vert' activeIndex={props.index} direction={direction} onSelect={handleSelect}
         interval={null} controls={false} indicators={true} touch={false} keyboard={false}>
            <Item id='blank' className={'h-100'}>
                <Container className='w-100 h-100 d-flex'>

                </Container>
            </Item>    
            <Item className={'h-100'}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>About Me</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100'}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Past Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100'}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Current Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
        </Carousel>
    )
}
export default VCarousel;

轮播的 CSS：

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
    -webkit-transform: translate3d(0,-100%, 0);
        -moz-transform: translate3d(0,-100%, 0);
            transform: translate3d(0,-100%, 0);
}