Estoy usando el desplazamiento infinito, el estilo se aplicó solo a los elementos de matriz ya renderizados y no a los elementos de matriz recién renderizados... ¿cómo puedo aplicar esto a todos los elementos de matriz de representación futura? Estoy obteniendo datos en forma de matriz. Primero iteré los elementos de la matriz y agregué el color de fondo y el color del texto a los elementos ya representados, pero a medida que funciona el desplazamiento infinito, representó otro conjunto de elementos de la matriz, entonces, ¿cómo puedo aplicar este color de fondo y color de texto en todos los componentes?
const toggleModefunc = (props) => { if (Mymode === "light") { setMymode("dark") document.body.style.backgroundColor = "#042743"; const elements = document.querySelectorAll(".card-body") elements.forEach(elems => { elems.style.backgroundColor = "#042743"; elems.style.color = "#fff" }); } else { setMymode("light") document.body.style.backgroundColor = "white"; const elements2 = document.querySelectorAll(".card-body") elements2.forEach(elems => { elems.style.backgroundColor = "#fff"; elems.style.color = "black" }); } }// La función de mapa
{this.state.articles.map((element) => { return ( <div className="col-md-4" key={element.url}> <Newsitem title={element.title ? element.title : ""} description={ element.description ? element.description : "" } imageurl={element.urlToImage} newsUrl={element.url} author={element.author} date={element.publishedAt} source={element.source.name} /> </div>Técnicamente puedes hacer algo como esto en reaccionar
Supongamos que NewsItem es .card-body e isDark puede representar su estado. Asumiré que el valor predeterminado de su estado está configurado como tema light .
El estado cambiará según el clic del botón, lo que cambiará el color de los elementos dentro de la matriz.
{ this.state.articles.map((element) => ( <div className="col-md-4" key={element.url}> <Newsitem className={`card-body ${isDark ? : 'dark-class' : 'fff'`}} // maybe you can add a custom css class for dark theme title={element.title ? element.title : ""} description={element.description ? element.description : ""} imageurl={element.urlToImage} newsUrl={element.url} author={element.author} date={element.publishedAt} source={element.source.name} /> </div> )); }