ReactNative/MobX：如何從MobX訪問組件參考？

Question

如何從MobX訪問組件引用，下面的例子中，運行'doSomething'的樂趣是在componentDidMount之後，我得到了一個沒有函數的錯誤， 我想弄清楚如何訪問MobX中的ref。 任何東西將不勝感激。非常感謝。

@observer 
class MyNav extends Component { 
    testFun() { 
    } 
} 

@observer 
class MyComponent extends Component { 
    doSometing() { 
     this._myNav.testFun();//this._myNav.testFun() is not a function 
    } 

    render() { 
     return (<MyNav ref={(ref) => this._myNav = ref}/>) 
    } 
} 

Answer 1

我已經解決了它;

• 1.TestComponent是我的根組件，它包拖成分「作者」和「TestSome」
• 2.重要的是，我想通過組件作者
• 3調用組件TestSome的功能。所以，我使用ref，但我不能，並且我得到了一個錯誤：this._testSome.testFun（）不是函數
• 4.然後，使用調試遠程，我弄清楚，有一個道具名稱'wrappedInstance'，所以正確的調用是：this._testSome.wrappedInstance.testFun（）

和波紋管是我的代碼，希望對我有所幫助，謝謝。

'use strict'; 
import React, {Component} from 'react'; 
import { 
    StyleSheet, 
    View, 
    Text, 
    TouchableOpacity 
} from 'react-native'; 
import {observer, Provider, inject} from 'mobx-react/native'; 
import {observable, action, autorun} from 'mobx'; 

let appState = observable({ 
    name: 'walker xiong' 
}); 

@inject('store') @observer 
class TestSome extends Component { 
    _testView = null; 

    testFun() { 
     this._testView && this._testView.setNativeProps({style: {backgroundColor: '#ff0000'}}); 
    } 

    render() { 
     return <View ref={(ref) => this._testView = ref} style={[Styles.container, {backgroundColor: '#eaeaea'}]}/>; 
    } 
} 

@inject('store') @observer 
class Author extends Component { 
    static defaultProps = { 
     doSomething: null 
    }; 

    render() { 
     let {name} = this.props.store; 
     return (
      <TouchableOpacity 
       activeOpacity={1} 
       onPress={() => this.props.doSomething && this.props.doSomething()} 
       style={Styles.container}> 
       <Text style={{fontSize: 20, color: '#ff0000'}}>{`${name}`}</Text> 
      </TouchableOpacity> 
     ); 
    } 
} 

@inject('store') @observer 
class TestComponent extends Component { 
    _testSome = null; 

    /** 
    * 1. TestComponent is my root component, and it wrap tow components 'Author' and 'TestSome' 
    * 2. the important is , i want to call component TestSome's function through component Author 
    * 3. So , i use ref, but i can't , and i got an error: this._testSome.testFun() is not a function 
    * 4. and then , use debug remote, and i figure out that ,there is an props name 'wrappedInstance', so the correct call is : this._testSome.wrappedInstance.testFun() 
    */ 
    doSomething() { 
     // this._testSome && this._testSome.testFun();//it is wrong 
     this._testSome && this._testSome.wrappedInstance.testFun();//it is true 
    } 

    render() { 
     return (
      <View style={Styles.wrap}> 
       <Author doSomething={() => this.doSomething()}/> 
       <TestSome ref={(ref) => this._testSome = ref}/> 
      </View> 
     ); 
    } 
} 

export default class ReactionsComponent extends Component { 
    render() { 
     return (
      <Provider store={appState}> 
       <TestComponent/> 
      </Provider> 
     ) 
    } 
}; 

/* style */ 
const Styles = StyleSheet.create({ 
    wrap: { 
     flex: 1, 
     flexDirection: 'column', 
     justifyContent: 'flex-start', 
     alignItems: 'center' 
    }, 
    container: { 
     marginTop: 20, 
     width: 300, 
     height: 100, 
     flexDirection: 'column', 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#5591ea' 
    } 
});