如何在 React JS 中获取卡片的 href 和 id 的动态值答案

【问题标题】：How can I get a dynamic value of href and id's of the card in React JS如何在 React JS 中获取卡片的 href 和 id 的动态值
【发布时间】：2018-08-23 21:08:06
【问题描述】：

这是我在stackoverflow中的第一个问题，我还在学习如何编码，这可能是一个新手问题。

但是，当我想将我的数据与 axios 映射成卡片时，是否可以有一个动态的 href 和 id 值？因为如果我运行我的代码，可以使用的卡（可以折叠的卡）只是第一个，其他的都不起作用。这是我的代码（抱歉代码与我的 vscode 中的真实文件不一样，因为我的真实文件变得混乱。）

render() {
  const mobillist = this.state.dataku.map((item, index) => {
    return (
      <div className="container-fluid" style={{ marginTop: "100px" }}>
        <div id="accordion">
          <div className="card">
            <div className="card-header">
              <a className="card-link" data-toggle="collapse" href="#colla">
                {item.model} - {item.tahun}
              </a>
            </div>

            <div id="colla" className="collapse show" data-parent="#accordion">
              <div className="card-body">
                <div className="row">
                  <div className="col">
                    <h4> ini menu 1 </h4>
                  </div>
                  <div className="col">
                    <center> <h4> ini menu 2  </h4></center>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
    return (
      <div>
        {mobillist}
      </div>

【问题讨论】：

您提供的代码中存在一些错误，例如 const mobillist 与 {mobilist} 以及您的渲染方式不同。你也能解释一下你到底想要什么吗？
我要做的是映射我的数据库数据并使用卡片中的数据。然而，所有的卡都不会完美地“上下”（只是第一个）因为我的代码，所有的 href 和 id 都具有相同的值。我想做的就是如何为每张卡设置不同的 href 和 id 值。 THx
哦，对了，顺便说一句，我正在使用 axios。但是我没有在我的代码中写 axios get 代码，因为它太长了
您可以通过使用index 像这样const mobillist = this.state.dataku.map((item, index) => { return ( <div className="container-fluid" key={index} style={{ marginTop: "100px" }}> ... </div> ) } 获得不同的ID
在你的href中你这样做<a href={{'#'+index}}></a>

标签： javascript jquery html reactjs

【解决方案1】：

您可以使用映射中的index 值为每个href 使用唯一ID，也可以将index 映射到手风琴div。示例见以下代码

render() {
    const mobillist = this.state.dataku.map((item, index) => {
    return (
      <div className="container-fluid" style={{ marginTop: "100px" }}>
        <div id="accordion">
          <div className="card">
            <div className="card-header">
              <a className="card-link" data-toggle="collapse" href={"#colla"+ index}>
                {item.model} - {item.tahun}
              </a>
            </div>

            <div id={"colla"+ index} className="collapse show" data-parent="#accordion">
              <div className="card-body">
                <div className="row">
                  <div className="col">
                    <h4> ini menu 1 </h4>
                  </div>
                  <div className="col">
                    <center> <h4> ini menu 2  </h4></center>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
    return (
      <div>
        {mobillist}
      </div>

【讨论】：

react 需要键索引。您应该将key={index} 添加到<div className="container-fluid" ..> 中的第一个div