在 a href 中使用道具链接到外部链接 - React

Question

我正在尝试使用路径道具将整张卡片链接到外部网站的投资组合部分。

CardItem 组件：

function CardItem(props) {
  return (
    <>
      <li className='cards_item'>
        <a href= {props.path} className="cards_item_link" target="_blank" rel="noopener noreffer">
          <figure className='cards_item_pic-wrap' data-category={props.label}>
            <img
              className='cards_item_img'
              alt='Portfolio Pictures'
              src={props.src}
              path={props.path}
            />
          </figure>
          <div className='cards_item_info'>
            <h5 className='cards_item_text'>{props.text}</h5>
          </div>
        </a>
      </li>
    </>
  );
}

我传递的 CardItem 是：

<CardItem
  src=image/magic.png"
  text="Magic App"
  label="iOs"
  path="https://bigassmessage.com/"
/>

I'm pretty sure it's the href linking but not sure how to fix with the correct styling. I tried backticks and ${props.path} but it just keeps me on the same page without properly taking me to a the correct page.

New to react so don't be too harsh.

Answer 1

所以我从您的代码创建了一个代码沙箱，它似乎工作正常。我看到的唯一一件事是你拼写了 noreferrer 错误，你应该把图像放在公用文件夹中，然后用“/image/magic.png”链接到它们。 / 告诉反应它在公共文件夹中。这是代码沙箱的链接。 https://codesandbox.io/s/crimson-water-0hxke?file=/src/App.js