React.js - 使用 this.props 传递实际 URL，而不是链接到 localhost？

Question

我正在用 React.js 开发一个小程序。我正在尝试使用 {this.props} 传递一个 URL，但不是链接到实际网页，而是链接到本地​​主机中的页面。我一直试图弄清楚发生了什么，但我不明白为什么链接没有引出。

我正在构建一个应用程序，该应用程序会生成一个用户单击的 URL，以直接指向 jpeg/gif。

JSON URL（狗的随机图片）：https://random.dog/woof.json

这是我的代码：

App.js

import React, { Component } from 'react';
import Search from './components/Search';

class App extends React.Component {
  state = {
    dog_URL: undefined,
  }
  getDogs = async (e) => {
    e.preventDefault();
    const api_call = await fetch(`https://random.dog/woof.json`);
    const data = await api_call.json();
    const dog_url = data.url;
    this.setState({
      result_URL: dog_url
    })
  }
  render() {
    return (
      <div className="container">
          <Search 
            getDogs={this.getDogs} 
        </div>

      );
  }
}

export default App;

从“反应”导入反应；

class Search extends React.Component {
    render() {
        return (
            <form onSubmit={this.props.getDogs}>
                <input type="text" name="q" placeholder="search for..." />
                <br />
                <Button> Search </Button>
                <br />
<p> Dog link: <a href="{this.props.dog_url}">{this.props.dog_url}</a> </p>
            </form>
            )
    }
}

export default Search;

预期结果：用户能够点击链接

实际结果：链接指向http://localhost:3000/%7Bthis.props.dog_url%7D

任何人都可以就为什么这不起作用提供一些指示或建议吗？

Answer 1

<p> Dog link: <a href="{this.props.dog_url}">{this.props.dog_url}</a> </p>

我不认为"{this.props.dog_url}" 需要被引用。相反，考虑到 JSX 变量插值的工作方式，简单的 {this.props.dog_url} 应该可以工作。这是否可能导致奇怪的行为？