javascript - react js中如何根据hash排序/隐藏组件的顺序？

Question

我遇到了一个问题，其中有一个包含 label, index, visible 的散列，我需要根据 index 值对组件进行排序，如果 visible 为 true，它应该是可见的。

这些是我的组件:

render(){
  return(
    <GroupFeaturedCarousel {...this.props}/>
    <GroupAssignmentCarousel {...this.props}/>
    <GroupSharedCarousel {...this.props}/>
    <GroupChannelCarousel {...this.props}/>
  )
}

哈希数组是这样的:

myArray = [
{default_label: "Featured", index: 0, visible: true},
{default_label: "Assigned", index: 1, visible: true},
{default_label: "Shared", index: 2, visible: true},
{default_label: "Channels", index: 3, visible: true}]

我能想到的就是使用 _.sortBy(myArray, 'index') 来解决这个问题，但是我该如何实现呢？

需要同时考虑排序和可见。

Answer 1

“哈希”是什么意思？您是指数组吗？

如果我理解正确的话，我会这样:

class X extends React.Component{
  myArray = [{ 
      component: GroupFeaturedCarousel,
      index: 0, 
      visible: true
    }, {
      component: GroupAssignmentCarousel,
      index: 1, 
      visible: true
    }
  ]
  
  render() {
    return this.myArray
    .filter(x => x.visible == true)
    .sort((a,b) => a.index - b.index)
    .map(({component: Component, index}) => ({
       <Component key={index} {...this.props} />
    });
  }
}