Si ce même scénario n'est pas répandu partout, vous pouvez utiliser le contexte de React, spécialement si vous ne voulez pas introduire tous les frais généraux introduits par les bibliothèques de gestion d'état. De plus, c'est plus facile à apprendre. Mais attention, vous pourriez en abuser et commencer à écrire du mauvais code. Fondamentalement, vous définissez un composant Conteneur (qui détiendra et gardera cet élément d'état pour vous) faisant de tous les composants intéressés à écrire / lire ce morceau de données ses enfants (pas nécessairement des enfants directs)
https://reactjs.org/docs/context.html
À la place, vous pouvez également utiliser plain React correctement.
<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} />
passez doSomethingAbout5 au composant 1
<Component1>
<Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/>
<Component5 propThatDependsOn5={this.state.somethingAbout5}/>
<Component1/>
S'il s'agit d'un problème courant, vous devriez commencer à penser à déplacer l'ensemble de l'état de l'application vers un autre endroit. Vous avez quelques options, les plus courantes sont:
https://redux.js.org/
https://facebook.github.io/flux/
Fondamentalement, au lieu de gérer l'état de l'application dans votre composant, vous envoyez des commandes lorsque quelque chose se produit pour obtenir l'état mis à jour. Les composants extraient également l'état de ce conteneur afin que toutes les données soient centralisées. Cela ne signifie pas que vous ne pouvez plus utiliser l'état local, mais c'est un sujet plus avancé.