为 React 渲染的同一个 div 类应用不同的颜色背景

Question

我正在通过一个 JSON 文件渲染一些基本文本，该文件通过 React to index.html 创建 3 个具有相同类和引导网格系统类的单独 div。我希望每个单独的 div 都有不同的背景颜色。我已经编写了一个小的 jQuery 代码段来执行此操作，但由于某种原因它不会呈现给单个 div 类。

我的反应组件（我通过另一个 React 类渲染它）

var StapleIndividual = React.createClass({
  render: function(){
      var articleNodes = this.props.data.map(function(title) {
        return(
          <div className="category col-md-4">
            <h2 article="title.article" key={title.id}>
              {title.article}
            </h2>
          </div>
        );
      });
    return (
      <div className="all-categories">
        {articleNodes}
      </div>
    );
  }
});

我在另一个文件中的小 jQuery 片段用于应用背景颜色。第一个 console.log 有效。在each声明中，它不是。

$(document).ready(function() {
  var randomColors =    ["green","yellow","red","blue","orange","pink","cyan"];
  console.log('this is working')

  $(".category").each(function() {
   var len = randomColors.length;
   var randomNum = Math.floor(Math.random()*len);
   $(this).css("background-color",randomColors[randomNum]);
   //Removes color from array so it can't be used again
   randomColors.splice(randomNum, 1);
  });
});

注意：我在 js 文件下面有我的 jquery 片段脚本标签，用于渲染反应组件。一开始我以为这是问题，但事实并非如此。

无法完全弄清楚这一点，任何指导将不胜感激！

Answer 1

正如@azium 建议的那样，考虑使用 React 本身为每个项目呈现不同的颜色。

var StapleIndividual = React.createClass({
  colors: ["green","yellow","red","blue","orange","pink","cyan"],
  getColor: function(){
    var len = this.colors.length;
    var randomNum = Math.floor(Math.random()*len);
    var color = this.colors[randomNum];
    this.colors.splice(randomNum, 1);
    return color;
  },
  render: function(){
    var articleNodes = this.props.data.map(function(title) {
      return(
        <div
          className="category col-md-4"
          style={{backgroundColor: this.getColor()}}>

          <h2 article="title.article" key={title.id}>
            {title.article}
          </h2>
        </div>
      );
    });

    return (
      <div className="all-categories">
        {articleNodes}
      </div>
    );
  }
});

我已按原样复制了您的随机颜色选择代码，但我建议采用不同的方法，因为如果文章太多，您可能会用完颜色。您可以简单地使用文章数组索引的模数或其他内容键入颜色数组，以便每 4 个 div 为蓝色，每秒为绿色等。

如果您仍然好奇为什么您的原始代码不起作用，那么进行一些调试可能是值得的。在您打印出您的console.log, 可能会记录 的长度$('.category')以查看它是否找到任何东西。如果不是，那么这绝对是渲染时间问题。React 渲染在等待 JSON 数据异步加载时是否被延迟？

祝你好运 ：）