ClassName 没有被传递给 Objects

Posted 2023-03-16

【中文标题】ClassName 没有被传递给 Objects

【英文标题】：ClassName is not being passed to Objects

【发布时间】：2020-01-29 06:24:47

【问题描述】：

代码如下。我正在尝试将活动状态传递给 React 轮播中的幻灯片。但是在检查器中，我得到的只是类名 [object. object] 而不是正确的类名。没有将 className 传递给轮播中的幻灯片是否有特殊原因？我试图做到这一点

class ProductSlider extends React.Component 
    constructor(props) 
      super(props);
      this.state =  activeSlide: -1, prevSlide: -1, sliderReady: false ;
    
      runAutochangeTO() 
        this.changeTO = setTimeout(() => 
          this.changeSlides(1);
          this.runAutochangeTO();
        , this.AUTOCHANGE_TIME);
      
      changeSlides(change) 
        window.clearTimeout(this.changeTO);
        const  length  = this.props.slides;
        const prevSlide = this.state.activeSlide;
        let activeSlide = prevSlide + change;
        if (activeSlide < 0) activeSlide = length - 1;
        if (activeSlide >= length) activeSlide = 0;
        this.setState( activeSlide, prevSlide );
      
render() 
        const  activeSlide, prevSlide, sliderReady  = this.state;

        return(
            <div ClassName="product-body">
                <header>
                    <NavBar></NavBar>
                </header>
                <div className=('slider', 's--ready': sliderReady)>
                    <div className="carousel_nav">
                        <span id="moveLeft" className="slider__control" onClick=() => this.changeSlides(-1)>
                            <svg className="carousel__icon"   viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.8507 24.0657L2 13.215L12.8507 2.36432" stroke="white" stroke- stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <span id="moveRight" className="slider__control slider__control__right" onClick=() => this.changeSlides(1)>
                            <svg className="carousel__icon"   viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.4109 3.00001L24.0779 14.0312L13.0467 24.6983" stroke="white" stroke- stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </div>
                    <div className="slider__slides pages">
                        slides.map((slide,index) =>(
                            <div
                            className=('slider__slide'), 's--active':activeSlide ===index, 's--prev': prevSlide===index
                            key=slide.index>
                            <div className="carousel-item ProductItem">
                              <div className="ImgWrap ImageWrap">
                                <img src=slide.img className="carousel-item-image"></img>
                                <div className="ImgShadow"></div>
                                  </div>  
                                  <div className="ProductInfo carousel-info">
                                    <div className="ProductTop carouself-item-top" id="carouself-info-top">
                                        <h2 className="ProductPrice item_price">
                                        slide.price</h2>
                                        <h1 className="ProductTitle item_title">slide.title</h1>
                                        <div className="ProductCategoryCalories item-category-info">
                                            <h3 className="ProductCategory item_category">slide.category</h3>
                                            <h3 className="ProductCalories item_calories">slide.calories</h3>
                                        </div>
                                    </div>
                                    <p className="ProductDescrip item_description">slide.description</p>
                                    <div className="ProductQty product-qty">
                                        <h4 className="QtyTitle qty_title">QUANTITY</h4>
                                        <Quantity className="QtyPicker"></Quantity>
                                    </div>
                                    <button className="CheckOutBtn addToBag">
                                        <h2>ADD TO BAG</h2>
                                    </button>
                                  </div>
                                </div>
                            </div>
                        ))
                    </div>
                </div>
            </div>
        )
    

const slides = [
     index: 0,
      background: 'green',
      img: imageList.turdBurgler, 
      price: '$5.00',
      title: 'Turd Burgler',
      category: 'stranger',
      calories: '789 calories',
      description: 'Two chocolate cake donuts smothered in cookie butter glaze. Oreo chocolate chip cookie dough. With fudge drizzle.'
    ]

【参考方案1】：

通过这样做：

<div className=('slider', 's--ready': sliderReady)>

您将一个对象传递给className，而它需要一个字符串。

我认为您正在寻找的是classnames，这是一个可以让您将类名连接在一起的库，可以这样使用：

const sliderClasses = classNames('slider', 's--ready': sliderReady );

<div className=sliderClasses>

【参考方案2】：

您可以在不添加任何外部库的情况下添加类名。

<div className=`slider $sliderReady ? 's--ready' : ''` >

注意：您可以阅读有关Template Literals 的更多信息。