Question

我通过JSON文件渲染一些基本文本，该文件通过React到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片段脚本标记，用于呈现react组件。起初我认为这是问题，但事实并非如此。

无法理解这一点，我们非常感谢任何指导！

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数据异步加载时被延迟？

祝你好运：）

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

1 个答案: