En realidad, la solución al problema de que el contenido y el color de fondo de la etiqueta escrita después de una etiqueta de imagen que cambia regularmente no aparece

1. Introducción al problema

1. Encontré un problema de este tipo al escribir un proyecto de reacción hoy (primero mire el código):

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>
        )
    }
}

Quiero que esa imagen cambie cada 3 segundos, y eso sucede. Pero algo salió mal con el div que agregué más tarde.

El div aparece en la página, pero su contenido y color de fondo no se muestran. Puedo mostrarlo eliminando la imagen anterior que cambia con el tiempo.
No pude encontrar este problema en línea, pero encontré una solución.

1. Resolución de problemas

Sólo necesitamos avanzar la posición del div:

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

O utilice un middleware:

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>
    )
  }
}

Finalmente, si quieres saber por qué ocurre este problema, puedes hacérnoslo saber en el área de comentarios. Aprendamos juntos