javascript - React-carousel-slider 不重新渲染

Question

伙计们! slider 组件的重新渲染存在问题。选择另一个 SELECT 选项后，其他图像将被加载到轮播组件中。但!!什么都没发生!组件的 props 正在更改，开发人员工具显示幻灯片(图像)已更改，但 DOM 上没有任何反应。

下面我发布代码。你怎么认为？问题出在哪里？

import React from 'react';
import CarouselSlider from "react-carousel-slider";
import { FormControl } from 'react-bootstrap';

class StampChoose extends React.Component {

    changeSamplesType = (e) => {
        const sampleType = e.target.value;
        this.props.changeSamplesType(sampleType);
        this.forceUpdate();
    }

    render() {
        let btnWrapperStyle = {
            position: "relative",
            borderRadius: "50%",
            height: "50px",
            width: "50px",
            textAlign: "center"
        }

        let btnStyle = {
            display: "inline-block",
            position: "relative",
            top: "90%",
            transform: "translateY(-50%)",
            fontSize: "36px"
        }


        let rBtnCpnt = (<div style = {btnWrapperStyle} >
            <div style = {btnStyle} className = "material-icons" >
                <i className="fas fa-angle-right"></i>
            </div>
        </div>);

        let lBtnCpnt = (<div style = {btnWrapperStyle} >
            <div style = {btnStyle} className = "material-icons" >
                <i className="fas fa-angle-left"></i>
            </div>
        </div>);  

        let iconItemsStyle = {
            padding: "0px",
            background: "transparent",
            margin:"0 5px",
            height: "80%"
        };

        const titles = this.props.titles;
        const slides = this.props.slides;
        
        return (
            <React.Fragment>
                        <FormControl componentClass="select" onChange={ this.changeSamplesType }>
                            <option value="type1">{ titles['type1'] }</option>
                            <option value="type2">{ titles['type2'] }</option>
                            <option value="type3">{ titles['type3'] }</option>
                            <option value="type4">{ titles['type4'] }</option>
                        </FormControl>
                        <CarouselSlider 
                            sliderBoxStyle = {{height: "150px", width: "90%", background: "transparent", overflow: "hidden"}} 
                            accEle = {{dots: false}}
                            newState={ this.state }
                            slideCpnts = {slides} 
                            itemsStyle = {iconItemsStyle}
                            buttonSetting = {{placeOn: 'middle-outside'}}
                            rBtnCpnt = {rBtnCpnt}
                            lBtnCpnt = {lBtnCpnt}    
                        />

            </React.Fragment>
        )
    }
}


export default StampChoose;

import React from 'react';
import { Grid, Row, Col, ControlLabel } from 'react-bootstrap';
import { samples, titles}  from '../../../samples-stamps';
import StampChoose from './StampChoose';


const Sample = (props) => (
    <React.Fragment>
        {
            <div>
                <img src={ `images/samples/${props.img}` } alt={ props.title } />
            </div>
        }
    </React.Fragment>
);


class StampsSamples extends React.Component {
    state = {
        sampleType: 'type1'
    }

    changeSamplesType = (sampleType) => {
        this.setState({ sampleType });
    }

    render() {
        const sampleType = this.state.sampleType;
        let slides = Object.keys(samples[sampleType]).map((item, i) => {
                    return (
                        <div>
                        <Sample 
                            key={i}
                            title={ samples[sampleType][item].title }
                            img={ samples[sampleType][item].img }
                            productId={ samples[sampleType][item].id }
                        />
                        </div>
                    );
            });

        return (
            <Grid>
                <Row>
                    <Col md={ 4 }>
                        <ControlLabel>Примерный образец оттиска <br/>
                            <small>(выберите образец оттиска)</small>
                        </ControlLabel>    
                    </Col>
                    <Col md={ 8 }>
                        <StampChoose 
                            slides={ slides }
                            titles={ titles }
                            changeSamplesType={ this.changeSamplesType }
                            />
                    </Col>
                </Row>
            </Grid>
        ); 
    }
}

export default StampsSamples;

Answer 1

在您的示例组件中，您返回 React.Fragment 内的一个对象。与此有什么关系吗？如果你删除里面的 { 和 } 并尝试怎么办？就像下面这样。不知道这是否是问题所在，但请尝试。您在幻灯片的 map 方法中还有一个额外的 DIV。如果您检查 React Carousel Slider 的说明，他们不会使用这些额外的 DIV 和 {}

 <React.Fragment>
   <div>
     <img src={ `images/samples/${props.img}` } alt={ props.title } />
   </div>   
 </React.Fragment>