如何在反应中将数据传递给另一个组件

Question

所以我正在创建一个电影网站，用户可以在其中搜索电影，然后单击卡片以获取有关电影的更多详细信息。我无法获取影片的详细信息部分以转到详细信息页面。我有一个onclick，用于使用已经存在movieresults.id 的电影ID 从api 中提取电影的详细信息。我在电影卡的图像部分有一个NavLink，这是用户单击的位置，它将转到显示电影详细信息的详细信息页面，但我正在努力将这些数据获取到该页面。

任何帮助将不胜感激。

卡片组件

import React, {useState} from 'react'
import placeholder from '../Assets/Placeholder.jpg'
import {Button, Alert, Nav, Row, Col} from 'react-bootstrap'
import '../sass/custom.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar, faPlay, faHeart, faShare } from '@fortawesome/free-solid-svg-icons'
import {NavLink} from 'react-router-dom';
import { FilmPage } from './FilmPage'

export const MovieCard = ({movieresults}) => {
    const [trailer, setTrailer] = useState();
    const [content, setContent] = useState([]);

    const onClick = e => {
        fetch(`https://api.themoviedb.org/3/movie/${movieresults.id}?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US`)
        .then((res) => res.json())
        .then((data) => {
            if (!data.errors) {
                console.log(data)
                setContent(data);   
            }else{
                <Alert variant="danger">Error</Alert>
            }
        })
    }

    fetch(`https://api.themoviedb.org/3/movie/${movieresults.id}/videos?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US`)
    .then((res) => res.json())
    .then((data) => {
        if (!data.errors) {
            setTrailer(data.results[0]?.key);   
        }else{
            <Alert variant="danger">Error</Alert>
        }
    })

    return (
        <div className="movie-card">
            <div className="poster-container">
                <span className="rating translate-middle rounded-pill">
                    <FontAwesomeIcon icon={faStar} className="star"/>
                    {movieresults.vote_average}
                </span>
            {movieresults.poster_path ? (
                <Nav.Link as={NavLink} exact={true} to={{pathname:"/film", state: content }} className="poster-link" >
                <img className="poster" 
                src={`https://image.tmdb.org/t/p/w300${movieresults.poster_path}`} 
                alt= {movieresults.title}
               />
               </Nav.Link>
            ) : (
                <img className="poster"
                 src={placeholder} 
                 alt= {movieresults.title}
                />
            )}
            </div>
            <div className="content-container">
                <b className="title mobile-text">{movieresults.title}</b>
                <p className="desc mobile-text">{movieresults.release_date}</p>
                <div className="card-btn">
                    <Button className="btn btn-secondary watch-btn" target="__blank" href={`https://www.youtube.com/watch?v=${trailer}`}><FontAwesomeIcon icon={faPlay} /> Trailer</Button>
                    <div className="icons">
                        <a href className="icon-btn"><FontAwesomeIcon icon={faHeart} onClick={onClick}/> </a>
                        <a href className="icon-btn"><FontAwesomeIcon icon={faShare} /> </a>
                    </div>
                </div>
                <div key={content.id}>
                    <h3 className="title">{content.title}</h3>
                </div>
            </div>
        </div>
    )
}

电影页面组件

import React from 'react'
import { Container } from 'react-bootstrap';

export const FilmPage = ({content}) => {
    return (
        <Container>
            <h1>Film Page</h1>
            <h1>{content.id}</h1>
        </Container>
    )
}

Answer 1

如果我正确理解您的问题，当您从Card Component 传递数据时，您无法从Film Page Component 获取数据。 要解决它，您必须使用子组件中的useLocation 钩子从Nav.Link 中获取状态。

import React from 'react'
import { Container } from 'react-bootstrap';
import { useLocation } from 'reacr-router';

export const FilmPage = ({content}) => {

    const location = useLocation();    

    return (
        <Container>
            <h1>Film Page</h1>
            <h1>{location.state.content.id}</h1>
        </Container>
    )
}

像这样使用useLocation，您可以轻松地重试您传递的状态。

Answer 2

希望对你有帮助..?

父.js

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

const Parent = () => {
const data = "Hello Everyone";
    return(
        <div>
        <Child data={data}/>
        </div>
    );
}

export default Parent;

Child.js

import React from 'react';

const Child = (props) => {
    return(
    <h2> {props.data} </h2>
    );
}

export default Child;

App.js

import React from 'react';
import "./index.css";
import Parent from './Parent'

const App = () => {
return (
    <div className="App">
    <Parent/>
    </div>
);
}

export default App;