ReactJS：将数据追加到az字母列表

Question

我正在将.NET项目转换为ReactJS，现在遇到的问题似乎找不到解决方案。

我有一个来自Firebase的数据列表，我想将其分为az字母列表。

Firebase的数据是一个简单的字符串数组：

• 香蕉
• 苹果
• 柠檬
• 梨

这是我的React代码：

renderList: function() {
  var children = [];
  for(var key in this.props.forums) {
    children.push(
      <div className="forum" key={key}>
      <Link to={"/forum/" + this.props.forums[key].id}>
      {this.props.forums[key].title}
      </Link>
      </div>
    )
  }
  return children;
}

然后，我从az按字母顺序列出：

• 一种
• 乙
• C
• 等等

我使用小型js脚本生成的az列表：

var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var alphabetList = document.getElementById("alphabetList");

for (var i = 0; i < letters.length; i++) {
  var nextChar = letters.charAt(i);
  var letter = "<div class='col-md-3 col-sm-3 col-xs-12'><div id='" + nextChar + "'><h2>" + nextChar + "</h2></div></div>";
  alphabetList.insertAdjacentHTML('beforeend', letter);
}

我不知道这是否也是这样做的正确方法。

无论如何，我想将我的水果列表添加到az列表中，如下所示：

• 一种
  • 苹果
• 乙
  • 香蕉
• 大号
  • 柠檬
• P
  • 梨

Answer 1

因此，如果我了解您有这样的事情：

var forums = [{title:"Apple", id:1}, {title:"Banana", id:2}, {title:"Lemon", id:3}, {title:"Pear", id:4}]

根据我的说法，最简单的解决方案是使用Underscore（或复制其功能http://underscorejs.org/#groupBy ），然后采用这种方式：

var orderForums = _.groupBy(forums, function(forum) {
    return forum.title.charAt(0)
})

然后将其作为道具传递到您的组件，并具有一个带有这样的渲染的组件：

renderList: function() {
    var letters = []
    for (letter in this.props.forums) {
        var forums = this.props.forums[letter].map(function(forum) {
            return <div className="forum" key={forum.id}>
                    <Link to={"/forum/" + forum.id}>
                        {forum.title}
                    </Link>
                </div>
        letters.push(<li key={letter}>{letter}<ul>{forums}></ul></li>)
    }
    return letters
}

Answer 2

一个非常基本的非反应版本来显示该方法：

 var fruits = ['Banana', 'Apple', 'Lemon', 'Lychee', 'Pear'], result = '', index = ''; fruits.sort(); fruits.map(function(fruit) { if (fruit.charAt(0) != index) { if (index.length) result += '</ul>'; index = fruit.charAt(0); result += '<li>'+index+'<ul>'; } result += '<li>'+fruit+'</li>'; }) result += '</ul>'; document.getElementById('result').innerHTML = result; 

 <div id='result'></div> 

因此，在这种情况下，我遍历水果而不是字母，因为您只想显示存在的水果的索引/选项卡。 例如，这与物理地址簿中的索引不同，在物理地址簿中索引是预先打印的，因此即使您没有名字以该字母开头的联系人，也要覆盖整个范围。