내가 반응 비교적 새로운 해요

같은 구성 요소의 인스턴스간에 상태를 전달 반응, 난 thusly 히 작용 응용 프로그램 만들려고 : 각 여러 구성 요소로,내가 반응 비교적 새로운 해요

이 앱은 여러 페이지로 구성을 페이지.
이러한 구성 요소 중 하나는 통계이며 사용자가 페이지의 구성 요소와 상호 작용할 때 변경 될 수 있습니다.
사용자가 특정 구성 요소를 클릭하면 "다른"페이지로 이동합니다.이 페이지는 텍스트, 데이터 등이 다른 페이지입니다. 이는 browserHistory.push() 메소드를 통해 수행됩니다 . 내가 변경 한 '통계'구성 요소를 한 페이지에서 다음 페이지로 이월 할 수 있기를 원하지만 어떻게 그렇게 할 것인지 잘 모르겠습니다. 또한 페이지 구성 요소에 통계의 기본값을 설정 했으므로 변경된 값을 새 페이지에 전달하면 새 값이 다시 정의됩니다. 누구든지 나를 도울 수 있습니까?

감사합니다.

2017-03-23 Eoin Moloney

상태는 해당 상태에 액세스해야하는 모든 구성 요소 수준 이상이어야합니다.

React의 원칙 중 하나는 구성 요소 계층 구조에서 "단방향"데이터 흐름이라는 것을 기억하십시오. 기본적으로 데이터/상태는 높은 수준에서 살아야하며 필요에 따라 하위 구성 요소로 전달되고 소비됩니다.

귀하의 경우 여러 페이지에 걸쳐 표시해야하는 "통계"데이터가 있습니다. 따라서 "통계"는 위의 구성 요소가 소유해야합니다. 모든 페이지 구성 요소의 - 아마도 앱 자체의 루트 구성 요소에 있어야합니다. 페이지 자체는 데이터를 가져 와서 렌더링하며 잠재적으로 데이터 편집에 적합한 콜백을 사용합니다. 공식 문서에 "반작용의 생각"으로 반응에 대한

페이스 북의 철학에 대해 좀 더 읽기 : 고려 https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live

출처

2017-03-23 23:43:53 jered

좋아요, 이제 통계는 루트 앱에서 유지됩니다. 문제는 페이지 코드에서 업데이트가 실제로 쉽게 정의 된 사용자 동작 (예 : 클릭)과 관련이 없으며 특정 조건이 충족되는 경우 자동으로 발생합니다. 이미 루트 앱에 관련 changeStats 메소드가 있지만, 이제는 React-router를 통해 Page에 콜백을 보내는 방법을 알아야하고, 필요한 조건이 충족 될 때 해당 콜백 (changeStats를 트리거합니다)이 발생해야합니다. ** 페이지**. –

@EoinMoloney 좋은 문서를 찾는 데 어려움을 겪고 있습니다 만, 경로를 통해 소품을 전달할 수 있습니다 (예 :''및 그런 다음 this.props.route.someCustomProp'을 사용하여 MyComponent에서 액세스합니다. – jered

사실, 이제 생각해 보면 ** App **의 하위 요소 인 ** App **에 속한 변수에 액세스하는 방법이 필요합니다. 원하는 경우 GitHub 레포에 대한 링크를 보낼 수 있습니다 : https://github.com/ProfHats/ParaQuest 유일한 관련 파일은 index.js (App가 위치한 곳)와 adventurePage (엉망이지만 찾기 확인하는 부분 ** switch (StatsIncrease.type) ** –

하나의 옵션은 응용 프로그램의 상태를 저장 React Redux을 사용하는 것입니다. 그런 다음 stats 구성 요소의 상태를 상태에 매핑하려면 mapStateToProps (자세한 내용은 Redux API 참조)을 사용하십시오.

출처

2017-03-23 23:46:23

답변

관련 문제