时间戳

首页 > 解决方案 > 在其他组件中使用 react this.state

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

问题描述

我的状态包含我的视频文件的缩略图，我有观看按钮，单击该按钮可以导航到新页面（组件）每个特定的缩略图都有一个名称和文件信息，我映射缩略图状态，如何传递文件信息到您单击监视按钮时导航的组件

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

标签： javascriptreactjsstatemern

解决方案

尝试访问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在不同的地方进行检查。

在这里你可以找到历史文档。

推荐阅读