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">
                      <h5 className="display-5 text-Movie-white text-center" >
                      {poster.metadata.name}
                      </h5>
                      <p className="text-center">{poster.metadata.Description}
                      </p>
                      </div>
                 </CardText>
                <CardFooter>
                      <div className="button-container  py-3"><a href="movie/">
             <Button className="btn-fill btn-movie " color="primary" >
                          Watch
             </Button></a>
                      </div>
                    </CardFooter>
                  </Card>
                </Col>
            )}

Answer 1

尝试访问history对象的push方法，如下所示：

goTo: (route, state) => {
 this.props.history.push(route, state);
}

...
// in your .map callback
<SomeComponentOrDom onClick={() => this.goTo('/SomewhereElse', { id: poster.id })}>
  Something
</SomeComponentOrDom>

...
// in SomewhereElse
constructor(props) {
  this.state = {
    posterId: props.history.location.state.id
  }
}

当然，您应该使代码更具防御性，并在不同位置检查null。

在这里您可以找到the doc for history。

在其他组件中使用react this.state

1 个答案: