как передать ссылку на другие компоненты в реакции - PullRequest
Новая
       46

как передать ссылку на другие компоненты в реакции

0 голосов
/ 13 апреля 2020

Я пытаюсь передать ссылку с идентификатором фильмов на другой компонент с именем mov ie detail js. проблема, с которой я сталкиваюсь - это подключение ссылки Movies Container к детализации mov ie. Пожалуйста, помогите

MoviesContainer. js

<Link  to={ `/movie/${films.id}${config.apiKey}` }>
     <button  className='successW' > GET INFO </button>
</Link>

MovieDetail. js

import React, { Component } from 'react';
import axios from 'axios';
import './MovieDetail.css';
import { props , match , params, } from 'react-router-dom';
//import config from '../../config.js';
import films from '../MoviesContainer/MoviesContainer.js';
import router from '../../router.js'



export default class MovieDetail extends Component{
  constructor(props){
    super(props);

    this.state= {
       movie:[]
    }
  }

  componentWillMount(){
    axios.get(`/movies/:id`).then(response=> {
          console.log(response.data.results);
      this.setState({ moviesList: response.data.movie });
    });
  }

 render(){
    console.log( this.setState.movie);
     const imgURL= 'http://image.tmdb.org/t/p/original';
       return(
           <div className='moviecd'>
             <img style={{ height: '85%', width: '100%' }} src={ imgURL + this.state.movie.poster_path } alt='movie poster'></img>

           </div>
         )
   }
  }

1 Ответ

0 голосов
/ 21 апреля 2020

Я думаю, вы используете React-Router. Прежде всего, вы можете указать путь, который вы будете использовать в системе Маршрутизатора, и какой компонент должен быть установлен, если этот путь используется. Например: 

<Route exact path="/movies/:movieId" component={MovieDetails} />

Это система, которую вы должны использовать для своего маршрутизатора. и есть кнопка для go компонента MovieDetails. js. Вы должны обернуть эту кнопку ссылкой (React-Router). Как это: 

<Link to = {{pathname: `${movieId}`}}> // The id of the movie you clicked
<button>Go Movie </button>
</Link>

Теперь, если вы нажали, на каком mov ie вы нажали, идентификатор этого mov ie будет go для компонента MovieDetails. js в качестве реквизита. ,

Если вы просматриваете реквизиты, поступающие в компонент MovieDetails, вы найдете реквизиты, такие как params.match.movieId. Теперь вы можете использовать этот идентификатор при выполнении запроса (внутри компонента MovieDetails). Как это: 

 fetch(`https://api.themoviedb.org/3/movie/${this.props.match.params.movieId}?api_key=<yourapikey>`)

Как вы обработаете это после того, как получите данные, зависит от вас!

Надеюсь, это было понятно. Удачи!

...