Przekazanie wartości od dziecka do rodzica w React.js

0

Mam klasę Main w React która ma 5 dzieci (osobne pliki). W jednym dziecku występuje wartość zmiennej X. Jeżeli X nie występuje w tablicy która przechowuję w rodzicu to cały powinien wyświetlić 'brak dostępu'. Jak najlepiej to ugryźć?

class Main extends React.Component {

    render() {
        if (wartoscOdChild2 !== x) {
            return (
                </div>
                    <span>brak dostepu</span>
                </div>
                )
        }
        return ( 
            <div>
                <Child1 />
                <Child2 />
                <Child3 />
                <Child4 />
                <Child5 />
            </div>
        );
    }

}
1

Nie znam jeszcze Reacta, ale jak dla mnie to występuje tutaj problem już z pierwszej lekcji tutoriala z ich oficjalnej strony: https://facebook.github.io/react/tutorial/tutorial.html#lifting-state-up

Ten stan powinieneś mieć raczej wyżej jeśli zamierzasz go tutaj sprawdzać, więc w komponencie Main.

1

Zastanawia mnie co to za tajemnicza zmienna X i co ona robi w Child2. Wydaje mi się, że powinieneś trzymać stan w komponencie nadrzędnym i przekazywać go niżej. Jeżeli któryś z child componentów ma w jakiś sposób wpływać na ten stan, to przekazujesz wtedy callback.

class Main extends Component {
  doSomething(a, b, c) {}

  render() {
    // żeby this bylo na swoim miejscu to uzywamy arrow function
    return <Child1 cb={(...args) => doSomething(...args)} /> 
  }
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1