当前位置：首页 > 文章列表 > 文章 > 前端 > 如何在 React 应用程序中嵌入带预览的链接

如何在 React 应用程序中嵌入带预览的链接

来源：dev.to 2024-10-29 12:04:04 0浏览收藏

介绍

构建 web 应用程序时，显示链接内容的预览通常很有用，就像社交媒体平台在共享 url 时如何显示链接预览一样。因此，除了 url 文本之外，您还可以在 url 旁边显示图片和描述等信息。

在这篇文章中，我将引导您在 react 应用程序中嵌入链接，同时使用 axios 和 cheerio 获取 open graph 元数据（例如标题、图像和描述）以抓取目标页面的 html。

我们将创建一个简单的 embeddedlink 组件，用于获取并显示任何提供的 url 的 open graph 元数据。

先决条件

在我们开始之前，请确保您已安装以下软件：

react – 使用 create react app 或您喜欢的任何方法设置 react 项目。
axios – 用于发出 http 请求。
cheerio – 用于解析和抓取 html（通常用于抓取的服务器端类似 jquery 的库）。

您可以使用以下命令安装 axios 和 cheerio：

npm install axios cheerio

第 1 步：创建 embeddedlink 组件

我们将创建一个新的 embeddedlink 组件，该组件接受 url 作为 prop，并从该链接获取 open graph 元数据，稍后我们将使用该元数据。完整代码如下：

import react, { usestate, useeffect } from 'react';
import axios from 'axios';
import cheerio from 'cheerio';

const embeddedlink = ({ url }) => {
    const [loading, setloading] = usestate(true);
    const [error, seterror] = usestate(null);
    const [imageurl, setimageurl] = usestate('');
    const [title, settitle] = usestate('');
    const [description, setdescription] = usestate('');

    useeffect(() => {
        const fetchogdata = async () => {
            try {
                const response = await axios.get(url, {
                    headers: {
                        'origin': 'https://mysite.com'
                    }
                });
                const html = response.data;

                // parse html content using cheerio
                const $ = cheerio.load(html);
                const ogimage = $('meta[property="og:image"]').attr('content');
                const ogtitle = $('meta[property="og:title"]').attr('content');
                const ogdesc = $('meta[property="og:description"]').attr('content');

                setimageurl(ogimage || '');
                settitle(ogtitle || '');
                setdescription(ogdesc || '');
                setloading(false);
            } catch (error) {
                seterror(error);
                setloading(false);
            }
        };

        fetchogdata();
    }, [url]);

    if (loading) return loading...;
    if (error) return error: {error.message};

    return (
        
            {imageurl && }
            
                {title && {title}}
            
            {!imageurl && !title && no preview available}
            {description}
            {url}
        
    );
};

export default embeddedlink;

第 2 步：使用 embeddedlink 组件

您现在可以在 react 应用程序中使用 embeddedlink 组件，如下所示：

import React from 'react';
import EmbeddedLink from './EmbeddedLink';

function App() {
    return (
        
            Link Preview Example
            
        
    );
}

export default App;

这将呈现所提供 url 的预览，及其图像、标题和描述。