如何在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);
    }

Answer 2

您可以拥有一个名为showCardIds的属性，该属性包含需要显示的卡片ID数组，并使用该属性在卡片的div上设置名为hidden的布尔属性。

你也可以做这样的事情，如下面的例子所示，这个例子也使用showCardIds作为状态。它仅过滤需要渲染的property并过滤掉其余部分。这是一个例子：

...
                {
                    this.state.properties.filter((property, index) => showCardIds.includes(index)).map(property => (
                        <CardSection property={property}/>
                    ))
                }
...

那样只有showCardIds数组中出现的那些才会出现，需要更多的逻辑来填充showCardIds中的id

希望这可以帮助。 hidden属性由HTML5支持，并且应该适用于大多数浏览器，除非它们真的是“古老的”。