在项目呈现后对项目进行排序

时间:2017-07-20 14:27:12

标签: javascript reactjs

我已经嵌套了JSON,然后使用此模块将其转换为嵌套文件树。 https://www.npmjs.com/package/react-nested-file-tree

我遇到的问题是,在通过组件并呈现后,我的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>
      )
    }

我是否可以修改文件夹的创建方式,以便我可以返回并对文件夹进行排序,在它们已经通过组件后进行排序。

例如,浏览特定<span>容器中的所有div标记,并按字母顺序对内部内容进行排序。

添加示例以获得更清晰。

假设我已经渲染了这个结构:

<div>
    <span className='icon sort'>Folder 3</span>
    <span className='icon sort'>Folder 1</span>
    <span className='icon sort'>Folder 2</span>
</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:

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"
          }
        ]
      }
    }
  }
}

0 个答案:

没有答案