外部链接与 function 中的反应

Question

所以我正在尝试使用底部的 href 链接到 Twitter？ 放置 atag 时出现错误。 我可以使用另一个 function 吗？

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

我看了其他问题，但它与我的不一样。 我的正在尝试将 href 放入 function 中。

刚刚添加了 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，用于根据您提供的代码片段 go 解决这个问题 - https://codesandbox.io/s/lingering-sky-d4lz21?file=/src/CardItem.tsx 。 它展示了通过使用props.path来使用Link组件，或使用props.href来使用<a>标签（以及props.target作为target属性）来稍微改变最终渲染的能力。