React中如何实现JS动态生成div点击跳转带参数路由并传参

实现方案 #

第一步：配置Home组件跳转逻辑 #

你当前的路由写法对应react-router v5版本，直接通过<Route>挂载的组件默认会自带路由相关属性，如果在Home组件中能正常拿到this.props.history可直接使用，拿不到的话就用withRouter高阶组件包裹导出：

// Home组件文件底部导出代码
import { withRouter } from 'react-router-dom'
export default withRouter(Home)

之后修改你的printCampaigns方法，解决循环闭包问题+绑定跳转逻辑：

async printCampaigns(){
    const totalSupply = 5
    const mainDiv = document.getElementById("myID")
    // 把var改成let解决循环闭包问题
    for(let i = 0;i<totalSupply;i++){
        const _div = document.createElement('div')
        // 给div绑定对应id
        _div.id = i
        // 绑定点击跳转逻辑
        _div.onclick = () => {
            this.props.history.push(`/campaign/${_div.id}`)
        }
        mainDiv.appendChild(_div)
    }
}

如果调用printCampaigns时出现this指向undefined的问题，需要在构造函数里绑定this，或者把方法改成箭头函数写法：

// 构造函数绑定写法
constructor(props) {
  super(props)
  this.printCampaigns = this.printCampaigns.bind(this)
}

// 箭头函数写法，直接替换原方法定义即可
printCampaigns = async () => {
  // 原有逻辑不变
}

第二步：Campaign组件获取路径id参数 #

和Home组件逻辑一致，如果是直接挂载在Route上的组件，直接通过路由props就能拿到参数：

class Campaign extends Component{
  componentDidMount() {
    // 直接获取路径中的id参数
    const id = this.props.match.params.id
    console.log('获取到的id为', id)
  }
}
// 拿不到参数的话同样用withRouter包裹导出即可
export default withRouter(Campaign)

React规范优化建议 #

不建议直接操作DOM创建元素，你可以把列表数据存在state中，在render方法里直接渲染元素，可维护性更高：

class Home extends Component{
  state = {
    totalSupply: 5
  }
  goToCampaign = (id) => {
    this.props.history.push(`/campaign/${id}`)
  }
  render() {
    return (
      <div id="myID">
        {Array.from({length: this.state.totalSupply}).map((_, index) => (
          <div key={index} onClick={() => this.goToCampaign(index)}>
            {/* 元素自定义内容 */}
          </div>
        ))}
      </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者Jyu Viole Grace