大家好，
我正在使用react js构建一个网站。现在我想使用react js显示内联的三个mdbootstrap级联卡。
尊敬的代码:(请注意，此页面上有导航栏，视频轮播，级联卡和页脚）。
import React, { Component } from 'react';
import { Container, CarouselIndicator, Row, Col, CardTitle, CardText, CardBody, CardImage, Button, Card, CarouselIndicators, Carousel, CarouselControl, CarouselInner, CarouselItem } from 'mdbreact';
export default class Home extends Component {
constructor(props) {
super(props);
this.next = this.next.bind(this);
this.prev = this.prev.bind(this);
this.state = {
activeItem: 1,
maxLength: 3
};
}
next() {
const nextItem = this.state.activeItem + 1;
if(nextItem > this.state.maxLength) {
this.setState({ activeItem: 1 });
} else {
this.setState({ activeItem: nextItem });
}
}
prev() {
const prevItem = this.state.activeItem - 1;
if(prevItem < 1) {
this.setState({ activeItem: this.state.maxLength });
} else {
this.setState({ activeItem: prevItem });
}
}
goToIndex(item) {
if (this.state.activeItem !== item) {
this.setState({
activeItem: item
});
}
}
render(){
const { activeItem } = this.state;
return(
<div>
<Carousel
activeItem={this.state.activeItem}
next={this.next}
className="z-depth-1">
<CarouselInner>
<CarouselItem itemId="1">
<video className="video-fluid d-block" autoPlay loop>
<source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
</video>
</CarouselItem>
<CarouselItem itemId="2">
<video className="video-fluid d-block" autoPlay loop>
<source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
</video>
</CarouselItem>
<CarouselItem itemId="3">
<video className="video-fluid d-block" autoPlay loop>
<source src="https://mdbootstrap.com/img/video/Agua-natural.mp4" type="video/mp4" />
</video>
</CarouselItem>
</CarouselInner>
<CarouselControl direction="prev" role="button" onClick={() => { this.prev(); }} />
<CarouselControl direction="next" role="button" onClick={() => { this.next(); }} />
</Carousel>
<Container>
<h4 className="mt-5 mb-2">Multi-item Carousel</h4>
<Carousel
multiItem
activeItem={this.state.activeItem}
next={this.next}>
<div className="controls-top">
<CarouselControl iconLeft className="btn-floating" direction="prev" role="button" onClick={() => { this.prev(); }} />
<CarouselControl iconRight className="btn-floating" direction="next" role="button" onClick={() => { this.next(); }} />
</div>
<CarouselIndicators>
<CarouselIndicator active={activeItem === 1 ? true : false} onClick={() => { this.goToIndex(1); }}></CarouselIndicator>
<CarouselIndicator active={activeItem === 2 ? true : false} onClick={() => { this.goToIndex(2); }}></CarouselIndicator>
<CarouselIndicator active={activeItem === 3 ? true : false} onClick={() => { this.goToIndex(3); }}></CarouselIndicator>
</CarouselIndicators>
<CarouselInner>
<Row>
<CarouselItem itemId="1">
<Col md="4">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
</CarouselItem>
<CarouselItem itemId="2">
<Col md="4">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
</CarouselItem>
<CarouselItem itemId="3">
<Col md="4">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(41).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
</CarouselItem>
</Row>
</CarouselInner>
</Carousel>
</Container>
</div>
);
}
}
有人可以帮助我吗？
谢谢，
尼科
答案 0 :(得分：0)
就我而言，具有多个项目的轮播是专业版的功能之一。但是，我尝试使用免费版本解决此问题，并发现Row和Col组件不适用于此情况。
因此，我将其删除，并使用
将卡片组件包裹在CarouselItem中<div style={{flexDirection: "row"}}> ... </div>
我希望这会有所帮助。