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

Question

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

我的 react 组件（我正在通过另一个 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 sn-p 在另一个文件中用于应用背景色。第一个 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 sn-p 脚本标签，用于渲染反应组件。起初我以为这是问题所在，但事实并非如此。

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

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 数据异步加载时渲染是否会延迟？

祝你好运:)