使用 props 将链接/网站添加到按钮 [英] Adding a link/website to a button using props

问题描述

我正在尝试使用 react.js 获取一个链接到网站的按钮，但我似乎无法弄清楚如何让它工作.从下面的代码中，除了按钮(props.website)之外，一切都完美无缺.当我单击按钮时没有任何反应.我做错了什么?

I am trying to get a button to link to a website using react.js but I can't seem to figure out how to get it working. From the code below everything works perfectly except for the button (props.website). Nothing happens when I click the button. What am I doing wrong?

   function Card(props){
    return(
        <MDBCol>
<MDBCard style={{ width: "22rem" }}>
  <MDBCardImage className="img-fluid" src={props.image} waves />
  <MDBCardBody>
    <MDBCardTitle>{props.name}</MDBCardTitle>
    <MDBCardText>
    {props.meaning}
    </MDBCardText>
    <MDBBtn href={props.website} >View Project</MDBBtn>
  </MDBCardBody>
</MDBCard>
</MDBCol> 
    );
}

推荐答案

来自对上述问题的评论:

From a comment on the question above:

它指向 localhost:3000/www.google.com

it directs to localhost:3000/www.google.com

然后链接实际上是有效的.但是网址不对.您似乎在使用此网址:

Then the link is actually working. But the URL is wrong. You appear to be using this URL:

'www.google.com'

但是浏览器无法知道这是另一个网站.从结构上讲，它与以下内容没有什么不同:

But a browser has no way of knowing that this is another website. Structurally it's no different than, say, this:

'www.index.html'

对于您网站上的资源来说，这是一个完全有效的名称.

Which is a perfectly valid name for a resource on your website.

要告诉浏览器这应该转到另一个网站，请包含协议:

To tell the browser that this should go to another website, include the protocol:

'http://www.google.com'

或者至少是开头的 // 默认为当前页面的协议:

Or at least the // at the start to default to whatever the current page's protocol is:

'//www.google.com'

这篇关于使用 props 将链接/网站添加到按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！