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>
)
}