React.js: Доступ к общему состоянию приложения из автономного компонента

Question

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

<Link to={`/weather-stations/${this.props.active_device}`} >view detail 
</Link> 

И я не могу найти способ, чтобы передать состояние приложения к этому компоненту, как: <ComponentName data={ this.state }/> Интересно, что является рекомендуемым способом сделать это в Реагировать? Благодарю.

Answer 1

«Официальный» (т.е. используется Facebook) способ сделать это с помощью Flux архитектуры, как описано здесь: https://facebook.github.io/flux/docs/overview.html

По существу, это предполагает создание «магазины», которые содержат данные, которые затем доступ и отображаются вашими компонентами React. В вашем примере вы можете создать WeatherStationDataStore с ключом active_device - компонент на другом конце этой ссылки может получить идентификатор из URL-адреса и отправить «Действие», которое вызывает WeatherStationDataStore.get(id), - если есть взаимодействие с сервером, необходимое для получить данные, которые можно абстрагировать через магазин.

Стандарт «список дел» для Flux можно найти здесь: https://facebook.github.io/flux/docs/todo-list.html и представляет собой хорошее введение в концепции.

Answer 2

Попробуйте это -

Связывая компонент -

<Link to={`/weather-stations/${this.props.active_device}`} state={{"foo":"bar"}} >view detail 
</Link> 

И в связанном компоненте

var data = this.props.location.state; 
//doSomethingWithData(data.foo);