Question

在一个React应用中，我有一个Table tbody，其外观如下：

<tbody>
                        {
                        this.state.datasets.map((datasetName, idx) => {
                          return (<tr>
                            <td>
                              <div className={"pretty p-default p-curve"}>
                                <input id = {"datasetCheckBox" + idx}
                                  checked = {this.state.checkBoxSelected === datasetName}
                                  type="radio" name="datasetName"
                                  onChange={(e) => this.checkBoxSelected(datasetName, e)}/>
                                  <div className={"state p-primary"}>
                                     <label>{idx}</label>
                                 </div>
                              </div>
                            </td>
                            <td>{datasetName}</td>
                            <td>{datasetsJSON["datasets"][datasetName]["region"]}</td>
                            <td>{datasetsJSON["datasets"][datasetName]["authors"]}</td>
                            <td>
                              <a href={datasetsJSON["datasets"][datasetName]["link"]}>{datasetName}</a>
                            </td>
                          </tr>)
                        }, this)
                      }
                      </tbody>

即使正确设置了href中表的其他参数，链接也显示为空datasetsJSON["datasets"][datasetName]。我尝试使用React Router，唯一重定向到链接的代码是在这里的答案中：

React-Router External link

但是在上述问题的答案中，如果我设置了path="/"，则在表加载时，它只是将我直接重定向到第一个链接。然后，我希望每个链接的path应该是不同的，但是提供datasetsJSON["datasets"][datasetName]["link"]作为path也不起作用。为什么简单链接a为空？我该如何解决？

Answer 1

我通过使用onClick方法而不是href链接属性解决了该问题。在表中，我有：

<td onClick = {() => this.articleClicked(datasetName)}>
     <span role="button"><a>{datasetName}</a></span>
</td>

然后，onClick方法：

  articleClicked = (datasetName) => {
    let url = datasetsJSON["datasets"][datasetName]["link"];
    window.open(url);
  }

当用户将鼠标悬停在链接上时，光标需要

<span role="button">才能显示手。是bootstrap东西。

在React中到外部资源的链接为空

1 个答案: