如何在文本中将检测到的URL转换为React中的链接？

Question

我正在制作一个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 是我尝试将其转换为链接显示的元素。

例如，当我像“ Hello，https://www.youtube.com”上上传时，然后 https：// www。 youtube.com 应该可以单击并重定向到YouTube。

您能告诉我如何解决这个问题吗？

Answer 1

这样做的反应方式是创建一个反应组件并将文本作为道具传递，并处理该组件内部的逻辑。

这是我对此的看法，您应该将链接检测更改为您的需求。

   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>)
}

Answer 2

假设已经在原始字符串中检测到URL的逻辑已经构建，并且您在后文本中传递的内容是一个包含URL的字符串，则可以将锚标记在H4上包裹，然后只需将HREF属性设置为{postText}}

<a href={postText}>
  <h4>{postText}</h4>
</a>

如果您打算在新选项卡中打开它

<a href={postText} target="_blank" rel="noreferrer">
  <h4>{postText}</h4>
</a>