#reactjs
#реагирует на
Вопрос:
У меня есть родительский компонент, в котором есть логика открытия/закрытия для дочернего компонента. Дочерний компонент также имеет логику открытия/закрытия. Но поведение этих компонентов неверно, когда я закрываю дочерний элемент в дочернем, я не могу снова открыть его в родительском. Как переписать его правильным способом, может быть, с одним целым состоянием использования?
export const Parent = () =gt; { const [isChildVisible, setChildVisible] = useState(false); return ( lt;gt; lt;span className="link" onClick={() =gt; { setChildVisible(!isChildVisible); }} gt; Click lt;/spangt; {isChildVisible amp;amp; lt;Child /gt;} lt;/gt; ); }; export const Child = (props) =gt; { const [isClosePopup, setIsClosePopup] = useState(false); return ( lt;gt; {!isClosePopup amp;amp; ( lt;StyledChildgt; lt;span onClick={() =gt; { setIsClosePopup(!isClosePopup); }} gt; X lt;/spangt; Content lt;/StyledChildgt; )} lt;/gt; ); };``` Комментарии:
1. как сказал абхи патил, вам нужно определить состояние в родительском компоненте и передать его как опору ребенку. Чтобы установить состояние, вы должны передать
setStateего также в качестве опоры ребенку. Другой способ решить эту проблему можно было бы с помощью чего-то вроде redux, но это может быть излишним для вашего варианта использования2. Я использую redux в этом проекте, но не понимаю, как его реализовать в данном случае.
3. Просто следуйте подходу из приведенного ниже ответа. Но если вы хотите решить эту проблему с помощью redux, вам просто нужно определить редуктор для нужного значения и выбрать его в родительском компоненте с помощью
useSelector(state =gt; state.isChildVisible), а затем вы можетеdispatchсоздать новое состояние в дочернем компоненте. Но этот подход будет не таким чистым, как другой, имо
Ответ №1:
переместите дочерние состояния в родительское и пройдите через реквизиты.
export const Parent = () =gt; { const [isChildVisible, setChildVisible] = useState(false); const [isClosePopup, setIsClosePopup] = useState(false); return ( lt;gt; lt;span className="link" onClick={() =gt; { setChildVisible(!isChildVisible); }} gt; Click lt;/spangt; { isChildVisible amp;amp; lt;Child isClosePopup={isClosePopup} setIsClosePopup={setIsClosePopup}/gt; } lt;/gt; ); }; export const Child = (props) =gt; { const {isClosePopup,setIsClosePopup} =props return ( lt;gt; {!isClosePopup amp;amp; ( lt;StyledChildgt; lt;span onClick={() =gt; { setIsClosePopup(!isClosePopup); }} gt; X lt;/spangt; Content lt;/StyledChildgt; )} lt;/gt; ); };``` Комментарии:
1. Большое спасибо! Теперь это хорошо работает! Пожалуйста, отредактируйте в своем ответе 16-ю строку, там два isClosePopup={isClosePopup} вместо setIsClosePopup={setIsClosePopup}