Petua Pantas: Bina komponen pemain video di React

Bina komponen main balik video React boleh diguna semula

Artikel ini akan membimbing anda langkah demi langkah untuk membuat komponen video React yang dapat melengkung melalui senarai video dari Vimeo, YouTube, dan Dailymotion. Komponen ini mudah berkembang untuk menyokong penyedia video lain.

Kami akan menggunakan

sebagai persekitaran pembangunan, yang menyokong penambahbaikan panas, membolehkan anda melihat komponen membina hasil dengan serta -merta dalam penyemak imbas anda tanpa menyegarkan halaman selepas setiap perubahan kod. react-hot-boilerplate

Komponen video ini tidak mempunyai keadaan sendiri, menjadikannya boleh diguna semula dan boleh diramalkan, yang bermaksud bahawa input yang sama akan sentiasa menghasilkan output yang sama. Artikel ini juga akan membincangkan amalan terbaik untuk membina komponen dalam React, termasuk menentukan prop yang diperlukan menggunakan

, mendekonstruksi prop, dan menggunakan pengendali lanjutan untuk membuat komponen lebih disesuaikan dan dinamik. Kod sumber dan demo boleh didapati di repositori GitHub kami (pautan ditinggalkan). propTypes

Penyediaan Persekitaran Pembangunan

Pertama, dengan mengandaikan anda telah memasang git, klon repositori:

git clone https://github.com/gaearon/react-hot-boilerplate

Navigasi ke direktori projek dan pasangkan kebergantungan:

cd react-hot-boilerplate
npm install
npm install --save query-string
npm start

Jika semuanya berjalan lancar, konsol akan memaparkan

. Webpack mengambil sedikit masa untuk memproses fail. Apabila selesai, penyemak imbas akan memaparkan "Hello, World." Listening at localhost:3000

Buat komponen

1. Buat fail komponen: Buat dalam direktori src, tambahkan kod awal: social-video.js

import React, { Component } from 'react';

export default class SocialVideo extends Component {
  render() {
    return (<h1 id="Social-Video">Social Video</h1>);
  }
}

2. Buat senarai video dalam : App.js Tentukan pelbagai video dan render komponen dalam App komponen: SocialVideo

import React, { Component } from 'react';
import SocialVideo from './social-video';

const videos = [
  // ... (视频数据)
];

export default class App extends Component {
  // ... (状态管理和视频切换逻辑)
  render() {
    const { service, video } = videos[this.state.videoIndex];
    return (
      <div>
        <SocialVideo height="270" service={service} video={video} width="500" />
        {/* ... (按钮等) */}
      </div>
    );
  }
}

3. lengkap komponen: SocialVideo Gunakan perpustakaan untuk menghuraikan url video dan menjadikan video dengan query-string: iframe

import qs from 'query-string';
import React, { Component, PropTypes } from 'react';

export default class SocialVideo extends Component {
  // ... (propTypes定义)

  getIdFromVideoString(vString) {
    // ... (从视频URL中提取ID)
  }

  render() {
    const { service, video, ...htmlTags } = this.props;
    const src = `${SocialVideo.urlMap.get(service)}${this.getIdFromVideoString(video)}`;

    return (
      <iframe src={src} frameBorder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen {...htmlTags} />
    );
  }
}

Sekarang, anda sepatutnya dapat melihat komponen video yang sedang berjalan dalam

. http://localhost:3000/

Ringkasan

Artikel ini menunjukkan cara membuat komponen video React yang boleh diguna semula, boleh diramalkan, dan mudah berskala. Kami menggunakan

dan amalan terbaik untuk membina komponen ini. react-hot-boilerplate

(bahagian Soalan Lazim harus dimasukkan di sini, kandungannya selaras dengan teks asal, tetapi ia boleh ditulis semula sedikit dan digilap seperti yang diperlukan, seperti menyampaikan soalan dan jawapan dalam format yang lebih jelas)

Atas ialah kandungan terperinci Petua Pantas: Bina komponen pemain video di React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!