Funktionen von anderen Komponenten in react-native aufrufen

Question

Wie kann ich Funktionen von anderen Komponenten in react-native aufrufen?

Ich habe diese benutzerdefinierte Komponente, die eine andere Komponente woanders definiert und eine Bildschaltfläche rendert. Wenn Sie auf das Bild tippen, möchte ich eine Funktion von der anderen Komponente aufrufen. Wenn das Beispiel der Ausführung unter I undefined is not an object (evaluating this.otherComponent.doSomething')

export default class MainComponent extends Component { 

    _onPressButton() { 
    this.otherComponent.doSomething(); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <TagContainer style={styles.flow_container} ref={(instance) => this.otherComponent = instance}> 
     </TagContainer> 
     <TouchableHighlight onPress={this._onPressButton}><Image source={require('./img/ic_add.png')} style={styles.add_tags_button_view} /></TouchableHighlight> 
     </View> 
    ); 
    } 
} 

und

export default class OtherComponent extends Component { 

    addTag() { 
     this.state.tags = this.state.tags.push("plm"); 
     console.log('success..'); 
    } 

    .... 
} 

Answer 1

Die direkte Kommunikation zwischen den Komponenten erhalten wird nicht empfohlen, weil es Verkapselung bricht. Es empfiehlt sich, eine Prop zu der Komponente zu senden und die Änderung in der Methode componentWillReceiveProps zu verarbeiten.

class Main extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { value: 0 }; 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 
    
 
    handleClick(e) { 
 
    e.preventDefault(); 
 
    this.setState({ value: ++this.state.value }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <a href="#" onClick={this.handleClick}>click me</a> 
 
     <Child value={this.state.value}/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
class Child extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { value: 0 }; 
 
    } 
 
    
 
    componentWillReceiveProps(nextProps) { 
 
    if(nextProps.value !== this.state.value) { 
 
     this.setState({ value: nextProps.value }); 
 
    } 
 
    } 
 
    
 
    render() { 
 
    return <div>{this.state.value}</div> 
 
    } 
 
} 
 

 

 
ReactDOM.render(<Main />, document.getElementById('app'));

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

Answer 2

Benötigen Sie haben nicht die Funktion innerhalb der Klasse definiert werden. Hier ist ein Beispiel

in dem helpers.js

export async function getAccessKey(){ 
let accessToken = await AsyncStorage.getItem(ACCESS_TOKEN); 
return accessToken; 
} 

in der anrufenden Klasse.

import { getAccessKey } from '../components/helpers'; 
... 
//inside the method 
     let key = await getAccessKey();