Javascript 渲染后对项目进行排序

我有一个嵌套的JSON，然后使用这个模块将它转换成一个嵌套的文件树。

我遇到的问题是，在JSON通过组件并呈现之后，它的顺序不能得到保证

作者还支持创建自定义文件夹模板

 function CustomFolder ({ name, currentPath, folderObj, onclick }) {
      return (
        <div className="sort">
          <a ref={(name) => {this.folderName = name}} onClick={onclick}>
            <span className='glyphicon glyphicon-folder-open'>&nbsp;</span>
            {name}
          </a>
        </div>
      )
    }

如何重新渲染以实现此目标：

<div>
    <span className='icon sort'>Folder 1</span>
    <span className='icon sort'>Folder 2</span>
    <span className='icon sort'>Folder 3</span>
</div>

---

您不能在json数据传递到组件之前对其进行排序吗？@Morpheus当前在传递之前对其进行排序。但是，由于对象是动态的和深入的，映射后的顺序无法保证。也许使用

refs

将是一个解决方案->@Morpheus看起来可能有用。所以每个文件夹元素都会收到一个

ref

自身？如果您的对象是动态的和深入的，那么有一个模块可以帮助您调用normalizer。看看，这可能是你想要的。

<div>
    <span className='icon sort'>Folder 1</span>
    <span className='icon sort'>Folder 2</span>
    <span className='icon sort'>Folder 3</span>
</div>

const directory = {
  "_contents": [
    {
      "name": "filename_1",
      "path": "filename_1"
    },
    {
      "name": "filename_2",
      "path": "filename_2"
    }
  ],
  "folder_1": {
    "_contents": [
      {
        "name": "filename_1",
        "path": "folder_1/filename_1"
      }
    ]
  },
  "folder_2": {
    "_contents": [],
    "folder_2_1": {
      "_contents": [
        {
          "name": "filename1.md",
          "path": "folder_2/folder_2_1/filename1.md"
        }
      ],
      "folder_2_1_1": {
        "_contents": [
          {
            "name": "filename1.md",
            "path": "folder_2/folder_2_1/folder_2_1_1/filename1.md"
          }
        ]
      }
    }
  }
}