Используя реагировать this.state в других компонентах - PullRequest
Новая
       8

Используя реагировать this.state в других компонентах

0 голосов
/ 03 января 2019

У меня есть состояние, в котором содержатся миниатюры моих видеофайлов, у меня есть кнопка просмотра, при нажатии которой вы переходите на новую страницу (компонент), у каждого конкретного эскиза есть имя и информация о файле, я отображаю состояние миниатюр, как пройтиинформация о файле для компонента, по которому вы перемещаетесь, при нажатии на кнопку просмотра 

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

1 Ответ

0 голосов
/ 03 января 2019

Попробуйте получить доступ к методу history объекта *1001*, например: 

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 в разных местах.

Здесь вы можете найти документ по истории .

...