我正在制作一個 SNS 網站并嘗試將檢測到的文本中的 url 轉換為顯示為鏈接。
import React from "react";
import "./PostCard.css";
import { useNavigate } from "react-router-dom";
import datePretty from "../../helperFunctions/datePretty";
function PostCard({ userName, postTime, likeCount, commentCount, postText }) {
var pastTime = datePretty(postTime)
return (
<div className="postingCard">
<div className="postingHeader">
<div className="postingProfile">
<img className="postPP" src="profile.png" alt="Sample profile"></img>
</div>
<div className="postingWriter">
<h3>{userName}</h3>
</div>
<div className="dateWritten">
<h4>Posted {pastTime} ago</h4>
</div>
<div className="postSetting">
<i className="fa-solid fa-ellipsis fa-2xl" id="postSet"></i>
</div>
</div>
<div className="postingBody">
<div className="postingSection">
<div className="postWords">
<h4>{postText}</h4>
</div>
</div>
<div className="iconSection">
<div className="likeSection">
<i className="fa-regular fa-thumbs-up fa-2xl" id="like"></i>
<div className="likeCount" id="likeNum">
{likeCount}
</div>
</div>
<div className="commentSection">
<i className="fa-regular fa-comment-dots fa-2xl"></i>
<h5 className="commentCount">{commentCount}</h5>
</div>
</div>
</div>
</div>
);
}
export default PostCard;
這是我目前正在處理的代碼。postText是我嘗試轉換為顯示為鏈接的元素。
例如，當我上傳“你好，https://www.youtube.com”時，https://www.youtube.com應該能夠點擊并重定向到 YouTube。
你能告訴我如何解決這個問題嗎？
uj5u.com熱心網友回復：
假設在原始字串中檢測 url 的邏輯已經構建，并且你在 postText 中傳遞的是一個包含 url 的字串，你可以在你的 h4 周圍包裹一個錨標記，只需將 href 屬性設定為 {PostText}
<a href={postText}>
<h4>{postText}</h4>
</a>
如果您打算在新選項卡中打開它，請確保將 target 設定為 _blank 并將 rel 設定為 noreferrer
<a href={postText} target="_blank" rel="noreferrer">
<h4>{postText}</h4>
</a>
uj5u.com熱心網友回復：
這樣做的反應方式是創建一個反應組件并將文本作為道具傳遞，并處理該組件內部的邏輯。
這是我對此的看法，您應該根據需要更改鏈接檢測。
export default function PostText(props) {
const [isLink,setIsLink] = useState(props.text.includes("http"))
const [textArr,setTextArr] = useState([])
useEffect(()=> {
const txt = props.text
if (txt.includes("http")) {
setIsLink(true)
const firstIndex = txt.indexOf("http"); //find link start
const linkEnd = txt.indexOf(" ",firstIndex) //find the end of link
const firstTextSection = txt.slice(0,firstIndex)
const linkSection = txt.slice(firstIndex,linkEnd)
const secondSection = txt.slice(linkEnd)
setTextArr([firstTextSection,linkSection,secondSection])
} else {
setIsLink(false)
}
},[])
return isLink ? (
<div >
<p>{textArr[0]}</p>
<a href={textArr[1]} target="_blank" rel="noreferrer">Link</a>
<p>{textArr[2]}</p>
</div>
) : (
<div>
<p>{props.text}</p>
</div>)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463576.html
標籤：javascript 反应 网络