동일한 구성 요소의 모든 인스턴스간에 상태를 공유합니까?

Question

마우스를 올리면 간단한 툴팁이 표시되는 툴팁 구성 요소가 있습니다.

mouseLeave 구성 요소를 실행하면 setTimeout이 실행되고 끝나면 도구 설명이 닫힙니다 (setState({ open: false })). 이제

내가 네이티브 OS 툴팁의 한 반영하는 동작을 추가 할 :

당신 mouseLeave 도구 설명하지만, 즉시 mouseEnter 다른 도구 설명, 이전 툴팁 즉시 폐쇄되고 새를 사람은 열린다.

이렇게하려면 툴팁 구성 요소의 모든 인스턴스간에 공유 상태가 있어야합니다. Redux를 사용할 수는 있지만 너무 단순한 작업 (저장소와 상호 작용하고 작업 및 속성을 사용할 수있는 컨테이너가 필요합니다)에 약간 잔인한 것으로 보입니다.

더 간단한 솔루션이 있습니까?

Answer 1

ReactComponent간에 정보를 공유하는 가장 좋은 방법은 Flux 아키텍처입니다. Redux이 그 중 하나입니다.

더 간단한 옵션은 임시 정보를 저장하는 데 사용되는 browser native storage을 사용하는 것입니다. 이는 전역 변수와 유사하지만 특정 범위 및 기간 정의가 있습니다.

Answer 2

모든 Tooltip S의 부모 구성 요소의 state에 공유 상태를 이동이 부모가 값을 설정하는 방법 setWhatever를 정의하고, 속성을 통해 Tooltip 성분이 메소드를 전달

. 이렇게하면 아이들은 자신의 상태를 바꿀 필요가있을 때 실제로 부모 중 하나 인 자신의 setWhatever 속성을 호출 할 수 있습니다.