外部鏈接與 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屬性）來稍微改變最終渲染的能力。