Cara membenamkan pautan dengan pratonton dalam Aplikasi React

pengenalan

Apabila membina aplikasi web, selalunya berguna untuk menunjukkan pratonton kandungan pautan—seperti cara platform media sosial memaparkan pratonton pautan apabila anda berkongsi URL. Jadi, daripada hanya teks url, anda boleh menunjukkan maklumat og seperti gambar dan penerangan juga, di sebelah url.

Dalam siaran ini, saya akan membimbing anda melalui membenamkan pautan dalam apl React, sambil mengambil metadata Graf Terbuka (seperti tajuk, imej dan penerangan) menggunakan aksios dan cheerio untuk mengikis HTML halaman sasaran.

Kami akan mencipta komponen EmbeddedLink mudah yang mengambil dan memaparkan metadata Graf Terbuka untuk mana-mana URL yang disediakan.

Prasyarat

Sebelum kita mula, pastikan anda telah memasang yang berikut:

1. React – Sediakan projek React menggunakan Create React App atau mana-mana kaedah yang anda suka.
2. Axios – Untuk membuat permintaan HTTP.
3. Cheerio – Untuk menghuraikan dan mengikis HTML (pustaka seperti jQuery sebelah pelayan biasanya digunakan untuk mengikis).

Anda boleh memasang Axios dan Cheerio menggunakan arahan berikut:

npm install axios cheerio

Langkah 1: Mencipta Komponen EmbeddedLink

Kami akan mencipta komponen EmbeddedLink baharu yang mengambil url sebagai prop dan mengambil metadata Graf Terbuka daripada pautan itu yang akan kami gunakan kemudian. Inilah kod penuh:

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 <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div className="embedded-link border-2 p-5 my-3 border-neutral-800">
            {imageUrl && <img src={imageUrl} alt={title} className="cover-image max-w-50 w-auto h-auto" />}
            <a href={url} target="_blank" rel="noopener noreferrer" className="text-indigo-500 underline font-bold text-2xl">
                {title && <h3>{title}</h3>}
            </a>
            {!imageUrl && !title && <p>No preview available</p>}
            <p className="my-3">{description}</p>
            <p className="text-slate-500">{url}</p>
        </div>
    );
};

export default EmbeddedLink;

Langkah 2: Menggunakan Komponen EmbeddedLink

Kini anda boleh menggunakan komponen EmbeddedLink dalam apl React anda seperti ini:

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

function App() {
    return (
        <div className="App">
            <h1>Link Preview Example</h1>
            <EmbeddedLink url="https://example.com" />
        </div>
    );
}

export default App;

Ini akan memaparkan pratonton URL yang disediakan, dengan imej, tajuk dan penerangannya.

Mengendalikan Ralat dan Keadaan Memuatkan

Kami mengendalikan kemungkinan ralat dan keadaan pemuatan dengan menunjukkan mesej yang sesuai kepada pengguna:

• Semasa metadata sedang diambil, mesej mudah "Memuatkan..." ditunjukkan atau anda boleh menggunakan pemutar animasi atau apa sahaja.
• Jika berlaku masalah semasa pengambilan (mis., isu rangkaian), mesej ralat dipaparkan.

Kesimpulan

Apabila anda selesai, anda sepatutnya dapat melihat hasil seperti pada gambar di bawah.

Saya lebih suka gaya pautan terbenam dev. ini, tetapi anda boleh menggayakannya apa sahaja yang anda suka dan suka.

Atas ialah kandungan terperinci Cara membenamkan pautan dengan pratonton dalam Aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!