反応ネイティブの他のコンポーネントから関数を呼び出す

Question

反応ネイティブの他のコンポーネントから関数を呼び出すにはどうすればよいですか？

私はこのカスタムコンポーネントを使用して、別のコンポーネントを他の場所や画像ボタンで定義してレンダリングします。画像をタップすると、他のコンポーネントから関数を呼び出したいと思います。私はコンポーネント間の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> 
    ); 
    } 
} 

と

export default class OtherComponent extends Component { 

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

    .... 
} 

Answer 1

直接通信を取得し、以下の例を実行する場合、それはカプセル化を壊すので、お勧めしません。コンポーネントに小道具を送って、メソッドcomponentWillReceiveProps内の変更を処理させることをお勧めします。

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

クラス内の関数を定義する必要がする必要はありません。ここでは例として、呼び出し元のクラスの

helpers.jsで

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

です。

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