在函数中使用function的外部链接

Question

所以我试着用底部的href链接到Twitter？当放置atag时，我得到一个错误。还有别的功能我可以用吗？

Ps。我想做的是在我的主页上有一张图片，当用户点击它时，会将他们重定向到Twitter。

我看了其他的问题，但这和我的不一样。我的任务是在一个函数中放一个href。

刚添加了m个carditem.JS组件。谢谢！

​

import React from "react";
import "./Cards.css";
import CardItem from "./CardItem";
import { Link } from "react-router-dom";

function Cards() {
  return (
    <div className="cards">
      <h1>Lost Fantom Saga Projects</h1>
      <div className="cards__container">
        <div className="cards__wrapper">
          <ul className="cards__items">
            <CardItem
              src="images/img-9.jpg"
              text="Lost Fantom Warrios"
              label="Warriors"
              path="/services"
            />
            <CardItem
              src="images/img-2.jpg"
              text="Lost Fantom Disciples"
              label="Disciples"
              path="/services"
            />
          </ul>
          <ul className="cards__items">
            <CardItem
              src="images/img-3.jpg"
              text="Fantom Degens"
              label="Degens"
              path="/services"
            />
            <CardItem
              src="images/img-4.jpg"
              text="Coming Soon"
              label="Coming Soon"
              path="/products"
            />
            <CardItem
              src="images/img-4.jpg"
              text="Coming Soon"
              label="Coming Soon"
              href="https://twitter.com/LostFantomSaga/"
              target="_blank"
            />
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Cards;

​

​

import React from 'react';
import { Link } from 'react-router-dom';

function CardItem(props) {
  return (
    <>
      <li className='cards__item'>
        <Link className='cards__item__link' to={props.path}>
          <figure className='cards__item__pic-wrap' data-category={props.label}>
            <img
              className='cards__item__img'
              alt='Travel Image'
              src={props.src}
            />
          </figure>
          <div className='cards__item__info'>
            <h5 className='cards__item__text'>{props.text}</h5>
          </div>
        </Link>
      </li>
    </>
  );
}

export default CardItem;

​

Answer 1

一种可能适合您需要的简单方法是使用<a>标记而不是Link组件。

下面是一个快速而肮脏的CodeSandbox，您可以根据您提供的代码片段-- https://codesandbox.io/s/lingering-sky-d4lz21?file=/src/CardItem.tsx来处理这个问题。它演示了通过使用props.path来使用Link组件或使用props.href来使用<a>标记(以及target属性的props.target )来稍微更改最终呈现的能力。