Question

我正在研究React.js中的一个小程序。我试图使用{this.props}传递一个URL，但链接不是链接到实际的网页，而是指向localhost中的页面。我一直试图弄清楚发生了什么，但我不明白为什么链接没有导致。

我正在构建一个应用，可以生成用户点击的网址，直接引导到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;

从'react'导入React;

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

for i in range(len(r)):
    P[i, r[i]] += 1

我不相信<p> Dog link: <a href="{this.props.dog_url}">{this.props.dog_url}</a> </p>需要引用。相反，考虑到JSX变量插值的工作方式，简单地"{this.props.dog_url}"应该工作。这有可能导致这种奇怪的行为吗？

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

1 个答案: