javascript - React <a> 标签问题

Question

感谢您阅读本文。我开始学习 React，在我正在进行的练习中，目标是创建一个呈现 URL 并访问它的组件。我的组件是这样的:

import React from 'react';

export default (props) => (
  <div>
    <p>URL:</p>
    <p><a href="{props.url}" target="_blank">{props.url}</a></p>
  </div>
);

为了进行测试，我像这样渲染我的组件:

<Url
  url="https://www.google.com/"
/>

我正在使用 Webpack 开发服务器。问题是当我点击链接时。我不知道为什么我要到http://localhost:8080/%7Bprops.url%7D而不是谷歌页面。我的代码有什么问题吗？我应该如何以正确的方式去做？该示例没有对此进行任何解释。再次感谢您。

Answer 1

尝试渲染不带 " 双引号字符的 href={props.url}:

export default (props) => (
  <div>
    <p>URL:</p>
    <p>
      <a href={props.url} target="_blank">{props.url}</a>
    </p>
  </div>
);

这样它就不会编码引号字符，而是呈现 props.href 字符串值。

希望有帮助!