raect中，在一个定时变换图片的标签后面写的标签不显示内容与背景颜色的解决方法

一、问题介绍

1.今天写react项目时遇到这样一个问题(先看代码)：

import React, {
    
     Component } from 'react'
import {
    
     Link } from 'react-router-dom'

import './index.css'
export default class CarouselMap extends Component {
    
    
    state = {
    
    
        index:0,
        carouselMaps:[
            {
    
    
                //图片src
                imgSrc:'/images/图层 1.png',
                //去哪里？
                to:''
            },
            {
    
    
                //图片src
                imgSrc:'/images/云朵穿心.jpg',
                //去哪里？
                to:''
            },{
    
    
                //图片src
                imgSrc:'/images/可爱兔子.jpg',
                //去哪里？
                to:''
            },
            {
    
    
                //图片src
                imgSrc:'/images/风景 1.jpg',
                //去哪里？
                to:''
            }
        ]
    }
    componentDidMount(){
    
    
        const {
    
    carouselMaps} = this.state
        let num = 0
        this.srcTimer = setInterval(()=>{
    
    
        if(num+1===carouselMaps.length)
           num=0
           else
           num++
           this.setState({
    
    index:num})
        },3000)
    }

    componentWillUnmount(){
    
    
        clearInterval(this.srcTimer)
    }
    render() {
    
    
        const {
    
    index,carouselMaps} = this.state
        return (
            <div id='carouselMap'>
                <ul>
                    <li>
                        <Link>
                            <img src={
    
    carouselMaps[index].imgSrc} alt="" />
                        </Link>
                    </li>
                </ul>
                {
    
    /* 这个div不显示  */}
                <div>aaaaa</div>
            </div>
        )
    }
}

我想让那个图片每3秒换一次，确实实现了。但是我后面加的div出问题了。

div在页面出现了，但是它的内容与背景颜色却不显示了。我把前面那个随时间变化的图片去掉就能显示了。
这个问题我上网没有找到，但是我找到了解决方法

一、问题解决

我们只需要把div的位置提前：

 				<div>aaaaa</div>
                <ul>
                    <li>
                        <Link>
                            <img src={
    
    carouselMaps[index].imgSrc} alt="" />
                        </Link>
                    </li>
                </ul>

或者用一个中间件：

import React, {
    
     Component } from 'react'
import CarouselMap from '../CarouselMap'
import Test from '../Test'

export default class Test1 extends Component {
    
    
  render() {
    
    
    return (
      <div>
        <CarouselMap/>
        {
    
    /* Test里面放后面的东西,如:刚刚的div */}
        <Test/>
      </div>
    )
  }
}

最后，希望知道为什么会产生这个问题的小伙伴，可以评论区告知一下。大家一起学习学习