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

我正在React.js中编写一个小程序。我试图使用{this.props}传入一个URL，但是该链接没有链接到实际的网页，而是指向localhost中的页面。我一直在想到底发生了什么，但我不明白为什么链接没有被引导出来

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

JSON URL（狗的随机图片）：

这是我的密码：

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;

import React，{Component}来自'React'；
从“./components/Search”导入搜索；
类应用程序扩展了React.Component{
状态={
dog_URL:未定义，
}
getDogs=async（e）=>{
e、 预防默认值（）；
const api_call=等待获取(`https://random.dog/woof.json`);
const data=wait api_call.json（）；
const dog_url=data.url；
这是我的国家({
结果\u URL:狗\u URL
})
}
render（）{
返回(
狗链接：

---

我不认为需要引用

“{this.props.dog\u url}”

，而是简单的

{this.props.dog\u url}

考虑到JSX变量插值的工作原理，应该可以工作。这可能会导致奇怪的行为吗？

哇，你是对的！这完全解决了行为，我根本不需要在其周围加引号：）

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;

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