为React提供的同一div类应用不同的颜色背景

Question

我通过JSON文件渲染一些基本文本，该文件通过React创建3个具有相同类和引导程序网格系统类的独立div。我希望每个单独的div具有不同的背景颜色。我写了一个小的jQuery代码片段来做到这一点，但由于某种原因，它不会呈现给单个div类。

我在另一个文件中的应用背景色反应成分（我通过另一个渲染对此做出何种反应类）

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

我复制你的颜色随机选择代码原样，但我会建议不同的方法，因为你可能会用完的颜色，如果你有太多的文章。你可以简单地键入您的文章数组索引或其他东西的颜色阵列，所以每第四个div是蓝色每秒都是绿色等。

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

祝你好运:)