React Native - setState entre différents fichiers JS

Question

Je voudrais setState du composant A au composant B. A et B sont différents fichiers JS. J'ai essayé d'importer B à A et accéder à la fonction à l'intérieur B. Ont également faire la fonction dans B à statique, alors seulement trouver la fonction statique aucune instance, donc je ne pouvais pas accéder this en statique.

A.js

import B from '../B'; 
class A extends React.Component { 
    ChangeBContent(){ 
     B.SetContent(); 
    } 

    render(){ 
     return(
      <View> 
       <SpeicalBtn onPress={()=> this.ChangeBContent()}/> 
      </View> 
     ); 
    } 
} 

module.exports = A; 
AppRegistry.registerComponent('myApp',() => A); 

B.js

class B extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      content:'' 
     } 
    } 

    SetContent(){ 
     this.setState({content:'123'}); 
    } 

    render(){ 
     return(
      <View> 
       <Text>{this.state.content}</Text> 
      </View> 
     ); 
    } 
} 

module.exports = B; 
AppRegistry.registerComponent('myApp',() => B); 

Answer 1

Vous devriez les envelopper dans un autre composant de récipient.

ContentC.js

class ContentC extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
      contentA:'', 
      contentB: '' 
     } 
    } 
    SetContentA(){ 
     this.setState({contentA:'123'}); 
    } 
    SetContentB(){ 
     this.setState({contentB:'123'}); 
    } 
    render(){ 
     return(
     <ClassA content={this.state.contentA} /> 
      <ClassB content={this.state.contentB}/> 
     ); 
     } 
    } 

Et maintenant, vous pouvez utiliser le contenu avec props.contentA et props.contentB

Answer 2

Vous pouvez faire des tours sales, mais je pense que vous aurez besoin d'approche plus propre.

C'est ici que vous utiliseriez la bibliothèque de gestion d'état, par exemple redux, vous avez un magasin global et vous répartissez les actions. Vous pouvez regarder dans ce stackoverflow post