@PHPjedi

Правильно ли я думаю над логикой?

Добрый вечер!

Дайте совет по реализации, пожалуйста.

Есть компонент "Cars", там вы можете выбрать "BMW", "Mercedes-Benz" и "Audi". После выбора открывается компонент Car. Он выглядел следующим образом:

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import Vimeo from '@u-wave/react-vimeo'

class Car extends Component {
    constructor(props) {
        super(props);
        this.state = { car: {contents: []} };
    }

    componentDidMount() {
        const carId = this.props.match.params.slug
        axios.get(`/api/car/${carId}`).then(response => {
            this.setState({ car: response.data })
        })
    }

    render() {
        const car = this.state.car
        return (
            <div className="container-fluid">
                <div className="row justify-content-around">
                    <div className="col-4">
                        <h1>{car.title}</h1>
                        <hr/>
                        <ul>
                            {car.contents.map(content => <li key={content.id}><Link to={`/content/${content.slug}`}>{content.title}</Link></li>)}
                        </ul>
                    </div>
                    <div className="col-8 vimeo_container">
                        <Vimeo video="23804756" id="vimeo_player"/>
                    </div>
                </div>
            </div>
        )
    }
}

export default Car


При выборе определенной марки справа в меню выводится видео по машинам, например "BMW".

5c5c8ead9f7a7670860231.png

При клике на одну из видео, ссылка меняется (bmw-video-1).

Вопрос: Если выбор происходит на этом же компоненте, как реализовать обновление данных? Нужно ведь после клика на ссылку одного из видео(контента) изменить заголовок и id видео для проигрывания. Как это грамотно реализовать? Неужели написать обработчик event на onChangeURL?

Заранее спасибо!
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
inoise
@inoise
Solution Architect, AWS Certified, Serverless
Я бы предположил что стоит сделать отдельный компонент для просмотра видео. и сможете сделать все достаточно удобно. Есть еще один вариант - сделать вложенный компонент, которому при клике на видео задавать state м параметрами видео
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы