/ / React zmiany rozmiaru komponentów - javascript, reactjs

React zmiany rozmiaru komponentów - javascript, reactjs

Mam aplikację React, w której mam detektor zdarzeń dla zdarzenia resize na obiekcie window.

class App extends React.Component {
constructor(props){
super(props);

this.state = { width: 0 }
this.setSize = this.setSize.bind(this);
}

render() {
let content = this.state.width < 600 ? <MobileComponent/> : <DesktopComponent />;
return(<div>{content}</div>)
}

setSize() {
this.setState({
width: window.innerWidth
});
}

componentDidMount() {
this.setSize();
window.addEventListener("resize", this.setSize);
}

componentWillUnmount() {
window.removeEventListener("resize", this.setSize);
}
}

To działa, ale moim problemem jest to, że nie wiem jak uzyskać dostęp do stanu komponentu App (szerokość okna) wewnątrz komponentów potomnych.

Czy ktoś może mi wytłumaczyć, jak uzyskać dostęp do / send this.state.width w moich elementach potomnych (wiem, że mogę wysyłać z rekwizytami, ale co jeśli w moim mam jeszcze 2 komponenty?)

Odpowiedzi:

3 dla odpowiedzi № 1
      render() {
let content = this.state.width < 600 ? <MobileComponent/> : <DesktopComponent />;
return(<div>
<div>{content}</div>
<childComponent myWidth= {this.state.width}></childComponent >
<childComponent2 myWidth= {this.state.width}></childComponent2 >
</div>
)
}