如何为所有无限滚动渲染项添加样式？

Question

我正在使用无限滚动，样式仅应用于已呈现的数组项，而不是新呈现的数组项...我如何将其应用于所有未来呈现的数组项？我正在以数组的形式获取数据。我首先迭代数组项并向已呈现的项添加背景颜色和文本颜色，但随着无限滚动的工作，它呈现了另一组数组元素，所以我如何在所有组件上应用这种背景颜色和文本颜色？

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

//地图函数

{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>

Answer 1

从技术上讲，你可以在 React 中做这样的事情

假设 NewsItem 是 .card-body，而 isDark 可以代表您所在的州。我假设您的状态默认设置为 light 主题。

状态将根据您的按钮点击而改变，这将改变数组中项目的颜色。

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

如何为所有无限滚动渲染项添加样式？

How to add styles to all infinite scroll rendering items?

javascript

reactjs

web

foreach