Navigation - Variable an andere Dateien übergeben

Question

Ich bin neu auf React-Native und es ist meine erste React-Native App. Ich habe jedoch schon einige Probleme.

Ich möchte eine Variable von einer Klasse (Home.js) an eine andere übergeben. (Ist es möglich, ohne die Verwendung des composent in der render() fonction?)

##### Home.js ##### 
class Home extends Component { 
constructor(props) { 
    super(props); 
    this.state = {direction: "defaultvalue"}; 
    } 

    getCurrentDirection() { 
     return this.state.direction; 
    } 

    render() { 
    /***..... some elements ..*/ 
    } 
} 
export default Home 

Und

#### Two.js #### 
import Home from './Home' 

/** SOME CODE **/  

const DrawerOptions = { 
    initialRouteName: Home.getCurrentDirection(), 
    contentComponent: CustomDrawerContentComponent, 
    drawerWidth: 300, 
}; 

jedoch nicht ... funktioniert wie es zu lösen? Ich habe bereits einige Lösungen versucht, da die getCurrentDirection als statisch aber nichts deklariert.

Darüber hinaus scheint es ein spezieller Fall zu sein, da DrawerOptions keine Klasse ist. Könnten Sie bitte Ihrer Antwort auch hinzufügen, wie Sie es machen, wenn ich die Variable in die Klasse Two.js bekommen möchte? ich meinte, wenn Two.js zum Beispiel war:

Voraus eine Menge in

##### Two.js ##### 
    class Two extends Component { 
    var myvariable = Home.getCurrentDirection(); 

     render() { 
     /***..... some elements ..*/ 
     } 
    } 

Dank

Answer 1

Ein empfehlenswerter Weg, um den Zustand von einer Komponente in eine andere für den Zugriff ist (in diesem Fall) zu verwenden, die Home Komponente als ein Elternteil von Two Komponente. Auf diese Weise müssen Sie keine Funktion auslösen, um auf den Status Home zuzugreifen. Jedes Mal, wenn der Status der übergeordneten (in diesem Fall) Komponente aktualisiert wird, erhält die Komponente Two die aktualisierte Eigenschaft (Richtung). Wenn Sie eine Funktion von Two Komponente aufrufen möchten, müssen Sie eine Funktion als eine Eigenschaft übergeben (changeCurrentDirection), die die Funktion zurückrufen, die von Home Komponente ausgelöst werden soll.

So würden Sie so etwas wie dieses:

class Home extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     direction: "defaultValue" 
 
    }; 
 
    } 
 

 
    changeCurrentDirection() { 
 
    this.setState({ 
 
     direction: "valueChanged" 
 
    }) 
 
    } 
 

 
    render() { 
 
    let state = this.state; 
 

 
    return (
 
     <Two 
 
     direction={state.direction} 
 
     changeCurrentDirection={() => this.changeCurrentDirection.bind(this)}/> 
 
    ) 
 
    } 
 
} 
 

 
class Two extends React.Component { 
 
    render() { 
 
    let props = this.props; 
 
    
 
    return (
 
     <div> 
 
     <h3>{props.direction}</h3> 
 
     <button onClick={props.changeCurrentDirection()}>Change value</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 
React.render(<Home/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script> 
 
<div id="app"></div>

Zusätzliche Informationen, die Sie here finden.

Auch wenn Sie eine gute Verwaltung des Zustands Ihrer Komponenten haben möchten, ist mein Rat für Sie, redux zu verwenden. Mit dieser Bibliothek können Sie einfach die Aktionen und Eigenschaften der Komponente verbinden, auf die Sie von anderen Dateien aus zugreifen können, in denen Sie sie verwalten können.