Question

所以我有一个反应组件：

var ReportRow = React.createClass({
  render: function() {
    return (
      <tr>
          <td><a href="/report/{this.props.report.pk}/">{this.props.report.pk}</a></td>
          <td><a href="/report/{this.props.report.pk}/">{this.props.report.name}</a></td>
          <td><a href="/report/{this.props.report.pk}/">{this.props.report.unit}</a></td>
          <td><a href="/report/{this.props.report.pk}/">{this.props.report.date}</a></td>
      </tr>
    );
  }
});

除了某些原因报告.pk没有被填入href链接之外，一切都很好。它适用于显示，但不适用于报告链接。

相反，我的链接如下所示：

http://127.0.0.1:8000/report/%7Bthis.props.report.pk%7D/

Answer 1

你尝试过这样的事吗？

<a href={"/report/" + this.props.report.pk + "/"}>

或者你可以使用这样的模板：

<a href={`/report/${this.props.report.pk}/`}>

使用fiddle

的另一种解决方法

render: function() {
  var string = "hello " + this.props.name + "com";
  return <a href={string}>Hello</a>;
}

我希望它能帮到你

Answer 2

尝试使用console.log（this.props.report）或console.log（this.props.report.pk）来检查你的道具是否确实分配了值。

Reactjs this.props不在链接元素内呈现

2 个答案: