在 link 到外部 link 的 href 中使用道具 - React

Question

我正在尝试能够使用路径道具 link 整个卡片到外部网站的投资组合部分。

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 拼错了，你应该把图像放在 public 文件夹中，然后 link 用“/image/magic.png”给它们。 / 告诉它在 public 文件夹中做出反应。这是代码沙箱的 link。 https://codesandbox.io/s/crimson-water-0hxke?file=/src/App.js

在 link 到外部 link 的 href 中使用道具 - React

Using props in an a href to link to an external link - React

jsx

reactjs

react-props