React中导入tree.js节点label值并动态作为id prop传递给View组件的方法

步骤1：导出treeData并提取可用id列表 #

首先修改tree.js文件，在末尾添加导出语句，方便其他文件引入：

// tree.js 末尾新增
export default treeData

如果需要对传入的id做合法性校验，可以新增一个提取所有有效id的工具函数：

// 可以直接加在tree.js里，也可以单独放在工具文件中
export const getAllValidIds = (data) => {
  const ids = []
  Object.values(data).forEach(firstLevel => {
    if (firstLevel.nodes) {
      Object.values(firstLevel.nodes).forEach(secondLevel => {
        ids.push(secondLevel.label)
      })
    }
  })
  return ids
}

步骤2：修改路由配置，支持动态id参数 #

你当前的路由没有携带参数，我们需要把id放到路由路径中，既可以实现动态传值，刷新页面也不会丢失参数：

// Nav.js 顶部先引入tree.js的内容，注意替换为你实际的文件相对路径
import treeData, { getAllValidIds } from './tree.js'
import { Redirect } from 'react-router-dom'
const validIds = getAllValidIds(treeData)

// 修改Route部分的代码
function NAV() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        {/* 新增id动态参数 */}
        <Route 
          path='/jbrowse/:id' 
          render={(props) => {
            const currentId = props.match.params.id
            // 校验id合法性，避免传入不存在的id导致加载报错
            if (!validIds.includes(currentId)) {
              return <Redirect to='/' />
            }
            return <View {...props} id={currentId} />
          }} 
        />
      </Switch>
    </Router>
  )
}

步骤3：树节点点击跳转配置 #

在你渲染树形结构的组件中，给每个二级节点绑定点击跳转事件即可，以react-router v5的useHistory hook为例：

import { useHistory } from 'react-router-dom'

function YourTreeComponent() {
  const history = useHistory()
  // 二级节点点击触发的函数，入参为节点的label值
  const handleNodeClick = (nodeLabel) => {
    history.push(`/jbrowse/${nodeLabel}`)
  }
  // 其余树形结构渲染逻辑
}

如果你用的是第三方UI库的树形组件（比如antd的Tree），只需要在组件的onSelect/onClick回调中拿到对应节点的label值，调用上面的跳转逻辑即可。 #

步骤4：优化View组件（可选） #

建议给View组件加错误捕获逻辑，避免文件缺失导致页面直接崩溃，同时修改参考序列track的id避免不同物种数据缓存冲突：

function View(props) {
  try {
    const fasta= require(`../genome_data/${props.id}.fna`)  
    const fai= require(`../genome_data/${props.id}.fna.fai`)
    const gff= require(`../genome_data/${props.id}.sorted.gff.gz`)
    const gfftbi = require(`../genome_data/${props.id}.sorted.gff.gz.tbi`)
    const ssrbw = require(`../genome_data/${props.id}.bw`)

    const assembly ={
      name: `${props.id}`,
      sequence: {
        type: 'ReferenceSequenceTrack',
        // 替换为和当前id绑定的值，避免不同物种缓存冲突
        trackId: `${props.id}-ReferenceSequenceTrack`,
        adapter: {
          type: 'IndexedFastaAdapter',
          fastaLocation: { uri: fasta },
          faiLocation: { uri: fai },
        },
      },
      aliases: [props.id],
    }
    // 其余组件逻辑
  } catch (err) {
    return <div>当前物种基因组数据加载失败，请检查对应文件是否存在</div>
  }
}

内容的提问来源于stack exchange，提问作者AU_97_CB