javascript - 如何在reactjs中的条件渲染中添加classNames？

Question

我有一个带有图像的数据列表。我想做图像轮播。为此，我创建了卡片组件，我希望在这里一次显示 4 张卡片，其余卡片应隐藏。然后我想 setTimeout 为 5s 来显示剩余时间，但仅一次。
到目前为止我已经做到了。

about.js

import './about.scss';
import data from '../../data/data';
import CardSection from './card';


class About extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            properties: data.properties,
            property: data.properties[0]
        }
    }

    nextProperty = () => {
    const newIndex = this.state.property.index+4;
    this.setState({
      property: data.properties[newIndex]
    })
  }

  prevProperty = () => {
    const newIndex = this.state.property.index-4;
    this.setState({
      property: data.properties[newIndex]
    })
  }

    render() {
        const {property, properties} = this.state;
        return (
            <div className="section about__wrapper">
            <div>
            <button 
            onClick={() => this.nextProperty()} 
            disabled={property.index === data.properties.length-1}
            >Next</button>
            <button 
            onClick={() => this.prevProperty()} 
             disabled={property.index === 0}
            >Prev</button>
            <Container className="card__container">    
            <div class="card__main" style={{
                'transform': `translateX(-${property.index*(100/properties.length)}%)`
            }}>
                {
                    this.state.properties.map(property => (
                        <CardSection property={property}/>
                    ))
                }
            </div>
            </Container>    
            </div>
        </div>
        )
    }
}
export default About

about.scss

.card__container{
        overflow-x: hidden;
    }
    .card__main{
        display: flex;
        position: absolute;
        transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
        .card__wrapper {
            padding: 20px;
            flex: 1;
            min-width: 300px;
        }
    }

card.js

import React from "react";
import { Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button } from 'reactstrap';
class CardSection extends React.Component {
  render() {
    return (
      <div className="card__wrapper">
      <Card>
                <CardImg top width="100%" src={this.props.property.picture} alt="Card image cap" />
        <CardBody>
                    <CardTitle>{this.props.property.city}</CardTitle>
                    <CardSubtitle>{this.props.property.address}</CardSubtitle>
          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
          <Button>Button</Button>
        </CardBody>
      </Card>
        </div>
    );
  }
}

export default CardSection;

我在其中添加了转换来更改卡 onclick，但我希望它们自动更改并隐藏剩余的卡。

现在看起来像这样，

Answer 1

您可以使用 setInterval 在 componentDidMount 方法中添加项目

    componentDidMount() {
      this.interval = setInterval(() => this.setState({
                                         properties:data.properties /* add your data*/ }), 4000);
    }
    componentWillUnmount() {
      clearInterval(this.interval);
    }