react UI组件库antd-mobile中的carousel组件的一些问题

代码如下所示：

class Home extends Component {
    render() {
        const {
            carousels: {
                value = []
            } = {}
        } = this.props;
        
        return (
            <div>
                <Carousel className="my-carousel" autoplay={false} infinite>
                    {
                        value.map((item,index) => (
                            <img key={index} src={item}></img>
                        ))
                    }
                </Carousel>
            </div>
        );
    }
}

carousels是在Home组件的父组件中通过异步请求获得，然后通过props传到Home组件中的。carousels中的value是一个数组，包含了图片的url。

现在的话图片加载出来就是Carousel组件的默认高度，只有100px。然后如果自动轮播或者滑动的话图片的高度才会出来。

我想了一下原因大概是一开始value是空的，然后没有图片，组件就把组件高度设为了默认高度100px，就定死了。当图片的数据传下来以后，因为一开始组件已经把组件高度定死了，就不再自适应图片高度，造成组件高度是默认高度。（这里我也不知道为什么会这样，有人解答一下？）然后当滑动图片的时候，应该是触发了什么条件，让图片自适应了。（这里其实我也不知道为什么，高手解答一下？）

具体大概是这样：

我期待的：

然后实际上是这样的：

只有滑动之后或则自动轮播之后才会正常。

有没有人遇到跟我一样的问题…

求高手解答，弄了一下午了，好郁闷

airyland 1楼•3 个月前

为什么不发 issue。。

xiaozhouwu 2楼•3 个月前作者

@airyland 发了