如何在反应中将链接传递给另一个组件答案

【问题标题】：how to pass a link to another components in react如何在反应中将链接传递给另一个组件
【发布时间】：2020-07-25 12:02:12
【问题描述】：

我正在尝试将具有电影 ID 的链接传递给另一个名为电影详细信息 js 的组件。我遇到的问题是将电影容器链接连接到电影详细信息。请帮忙

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>
         )
   }
  }

【问题讨论】：

做成组件并导入？
你能给我举个例子吗

标签： node.js reactjs api nodes themoviedb-api

【解决方案1】：

我猜你正在使用 React-Router。首先，您可以指定您将在路由器系统中使用的路径以及如果使用此路径应安装哪个组件。例如：

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

这是您应该用于路由器的系统。并且有一个按钮可以转到 MovieDetails.js 组件。你应该用 Link(React-Router) 包裹这个按钮。像这样：

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

现在，如果您点击了您点击的电影，该电影的 id 将作为 props 转到 MovieDetails.js 组件。

如果你浏览 MovieDetails 组件的 props，你会发现一个类似于 params.match.movieId 的 props。您现在可以在发出请求时使用此 id（在 MovieDetails 组件中）。像这样：

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

获取数据后如何处理它取决于您！

我希望这是可以理解的。祝你好运！

【讨论】：