Как использовать некоторые реквизиты на других компонентах Reactjs

Question

Я отобразил список фильмов (постеров), у меня есть кнопка (смотреть) на каждом постере, после того, как вы нажмете кнопку просмотра, вы перейдете к другому компоненту (смотреть). Как передать отдельные элементы плаката из компонента «Плакат» в компонент «Часы» при нажатии кнопки.

{this.state.Poster.map(poster =>
          <Col md="3 " className="" >
            <Card className="card-user card-transparent">
              <CardImg top src={`/files/${poster.filename}`}></CardImg>
                <CardText className="py-3 px-3">
                  <div className="card-description">
                  <h6 className="display-5  text-center">{poster.metadata.name}</h6>
                  <p className="text-center">{poster.metadata.Description}</p>
                  </div>
                  </CardText>
                <CardFooter>
                  <div className="button-container  py-3"><a href="watch">
                    <Button className="btn-fill btn-movie " color="primary" >
                      Watch
                    </Button></a>
                  </div>
                </CardFooter>
              </Card>
            </Col>
            )}

Answer 1

Поскольку вы упомянули react-router | react-router-dom в v4, вы можете сделать это одним из следующих способов:

A

1. Заменить на

<Link
  className="btn btn-primary" // some bootstrap class 
  to={{
    pathname: "/watch",
    state: { posterId: poster.id } // I am assuming  post has id
  }}
/>

2. в WatchComponent

class WatchComponent extends React.Component {
 componentDidMount() {
   const { posterId } = this.props.location.state;
   //make ajax request to the server and get poster details 
   //promise resolve, set response into state 
   // this.setState({ poster: res.json()})

 }
 render() {
   const { poster } = this.state;
   return (
     // render poster details here.
   )


 }
}

или Вы можете просто сделать это

<Link
  className="btn btn-primary" // some bootstrap class 
  to={`/watch/${posterId}`} // provided that Route of WatchComponent is defined as (URL parameter) <Route path="watch/:posterId" component={WatchComponent} />
/>

затем в WatchComponent вы делаете

class WatchComponent extends React.Component {
 componentDidMount() {
   const { posterId } = this.props.macth.params;
   //make ajax request to the server and get poster details 
   //promise resolve, set response into state 
   // this.setState({ poster: res.json()})

 }
 render() {
   const { poster } = this.state;
   return (
     // render poster details here.
   )


 }
}