如何在其他组件 Reactjs 上使用一些 props

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

由于您在 v4 中提到了 react-router | react-router-dom，您可以通过以下任一方式进行操作：

一个

1. 替换为

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

1. 在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.
   )


 }
}