ReactNative/MobX: 如何从 MobX 访问组件引用?
ReactNative/MobX: How to access component refs from MobX?
如何从 MobX 访问组件引用,下面的示例,运行 'doSomething' 有趣的是在 componentDidMount 之后,我得到了一个非函数错误,
我想弄清楚如何访问 MobX 中的引用。
什么都会感激。多谢。
@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}/>)
}
}
我已经解决了;
- 1.TestComponent 是我的根组件,它包含两个组件 'Author' 和 'TestSome'
- 2.the重要的是,我想通过组件Author
调用组件TestSome的功能
- 3.So,我使用 ref,但我不能,我得到一个错误:this._testSome.testFun() 不是一个函数
- 4.and 然后,使用远程调试,我发现,有一个道具名称 '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'
}
});
如何从 MobX 访问组件引用,下面的示例,运行 'doSomething' 有趣的是在 componentDidMount 之后,我得到了一个非函数错误, 我想弄清楚如何访问 MobX 中的引用。 什么都会感激。多谢。
@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}/>)
}
}
我已经解决了;
- 1.TestComponent 是我的根组件,它包含两个组件 'Author' 和 'TestSome'
- 2.the重要的是,我想通过组件Author 调用组件TestSome的功能
- 3.So,我使用 ref,但我不能,我得到一个错误:this._testSome.testFun() 不是一个函数
- 4.and 然后,使用远程调试,我发现,有一个道具名称 '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'
}
});