Reagieren Sie die Größe ändern Sie die Komponenten - javascript, reactjs

Ich habe eine React-App, wo ich einen Event-Listener für resize-Ereignis auf dem Fensterobjekt habe.

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

Diese Sache funktioniert, aber mein Problem ist, dass ich nicht weiß, wie man auf den Zustand der App-Komponente (die Fensterbreite) innerhalb der Kindkomponenten zugreift.

Kann mir jemand erklären, wie ich this.state.width auf meine Kinder-Komponenten zugreifen / senden kann (ich weiß, dass ich mit Requisiten senden kann, aber was, wenn ich zwei weitere Komponenten habe?)

Antworten:

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