爲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渲染是否被延遲？

祝你好運:)