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

ReactJS: Appending data to a-z alphabetic list

本文关键字：a-z 列表 数据 ReactJS      更新时间：2023-09-26

我正在将一个.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 的字母列表：

  • 一个
  • 乙
  • 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 列表中，如下所示：

  • 一个
    • 苹果
  • 乙
    • 香蕉
  • L
    • 柠檬
  • P
    • 梨

所以如果我知道你有这样的东西：

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

根据我的说法，最简单的解决方案是使用下划线（或复制他们的函数 http://underscorejs.org/#groupBy），然后这样做：

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

然后将其作为 props 传递给您的组件，并拥有一个具有如下渲染的组件：

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
}

一个非常基本的非 React 版本来展示该方法：

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>

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

相关文章：