Как передать состояние дочернего компонента?

Question

[Николай]

У меня есть дочерний компонент состояние которого передается в родительский через props

<button onClick={()=>props.changeOn()} "> </button>

Родительский компонент его получает

const CenterSide = (props) =>
{
    const [IsOn,SetTop]=useState(false)
    const reverse= function (){
      if(IsOn==false){
          SetTop(true)
      }
      else {
         SetTop(false)

      };
    };

    return <div  ">
        <Nav  changeOn={reverse}/>
    </div>
}

Но как от этого родительского компонента передать состояние выше? без событий таких как onClick()

Comments

[Gary_Ihar]

Наверное можно рефой кинуть, но это дикий хардкод

Answer 1

[Aetae]

А зачем?
Всё идёт сверху вниз и никак иначе.
Либо события, либо контекст, либо глобальное хранилище типа redux. Но в любом случае оно должно быть задано заранее.

Comments

[Николай]

а зачем тогда придуман подъем состояний?

[Aetae]

Николай, лол. Оно называется подъёмом, но суть то приёма в том что берётся общее состояние в самом верху и спускается вниз вместе с обработчиками его меняющими.

[Николай]

а как это реализовать, не подскажите?

[Aetae]

Николай, видишь строчку где три "либо"? Вот там и ответ.
Первое либо - это то что у тебя сейчас в коде и есть. Только перенести это на уровень выше и кроме changeOn передавать ещё и состояние (то что IsOn) в props.
Второе либо - это использовать createContext с useContext внизу и Provide наверху. Дальше сам почитай.
Третье либо - муторное, в двух словах не накидаешь - читай отдельно.)

[Николай]

Aetae, хорошо я посмотрю скорее всего на первое либо. спасибо :3

Answer 2

[Арслан Абаев]

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

Comments

[Николай]

спасибо за ответ) но с помощью комментария выше я понял как это делать. передавал через пропсы функцию изменения состояния

[Арслан Абаев]

Николай, в данном случае лучше уже воспользоваться контекстом)