reactjs 如何根据用户点击生成URL

ohtdti5x  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(125)

我有一个加载组件的React App

<Route path="/" element={<Dashboard />} />

假设Dashboard呈现Ag网格表。(此示例https://ag-grid.com/react-data-grid/filter-set-tree-list/中的复杂对象表示例)
现在,我必须分享一个链接给任何人,比如:https://localhost:3000/dashboard并要求用户导航到埃里卡Rogers --〉Luke McBride --〉Paul Smith以获取Paul Smith的详细信息
相反,是否可以生成像https://localhost:3000/dashboard/EricaRogers/LukeMcBride这样的URL(或类似的东西),以便我可以共享此链接?

vc6uscn9

vc6uscn91#

恐怕我对React不是很感兴趣,但这里有一个Angular的工作示例:
https://plnkr.co/edit/FD3kwGSIqpvQIpco?open=app%2Fapp.component.ts

<ag-grid-angular
  #grid
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [treeData]="true"
    [animateRows]="true"
    [groupDefaultExpanded]="groupDefaultExpanded"
    [getDataPath]="getDataPath"
    (firstDataRendered)="onFirstDataRendered()"
    [rowData]="rowData"
  ></ag-grid-angular>

使用firstDataRendered()方法查找所需的项并将其选中

onFirstDataRendered() {
    // Find the person from the query string
    // Here, pretend it's Paul Smith
    const personToHightlight = "PaulSmith";
    this.grid.api.forEachNode(node =>{
      // Find the item you want to highlight
      if (node.data.path.displayValue.replace(' ', '') == 'PaulSmith'){
        node.setSelected(true, true, true)
        this.grid.api.ensureNodeVisible(node, 'middle')
      }
    })
  }

这将遍历节点并找到所需的节点。将其设置为选中,然后将网格滚动到正确的位置(ensureNodeVisible)。
如果树结构发生变化,Paul Smith在层次结构中移动,这种方法意味着仍然可以找到他。

相关问题