Question

我正在将一个.NET项目转换为ReactJS，现在面临一个我似乎无法找到解决方案的问题。

我有一个来自Firebase的数据列表，我希望将其划分为a-z字母列表。

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

然后我有一个来自a-z的字母列表：

A
乙
C
等

我使用小型js脚本生成的a-z列表：

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

我不知道这是否也是正确的做法..？

无论如何，我想将我的水果列表附加到a-z列表中，如下所示：

甲
- 苹果
乙
- 香蕉
→
- 柠檬
点
- 梨

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

显示方法的非常基本的非React版本：

＆＃13;

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;

＆＃13;

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

＆＃13;

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

ReactJS：将数据附加到a-z字母列表

2 个答案: