一般来说，父类更新子类元素可以通过传递Props方式完成该目的。QAP/Rax和React一样，也提供了ref属性为元素定义引用，达到方便控制子类元素的目的。
'use strict';
import { createElement, Component, render, findDOMNode } from 'rax';
import { View, Text, TouchableHighlight, Modal, Button, ListView, Image, Link, Navigator, Input } from 'nuke';
import QN from 'QAP-SDK';
class Demo extends Component {
onPress = () => {
this.input && this.input.focus();
}
render() {
return (
<View style={{alignItems:'center'}}>
<Input ref={(com)=>this.input = com}
style={{
width: '400rem',
height: '100rem',
borderWidth: 2,
borderStyle: 'solid',
borderColor: 'black',
mairgin:20
}}/>
<Button onPress={this.onPress}>点击输入框获取焦点</Button>
</View>);
}
}
render(<Demo />);
父类传递给子类的属性，在子类中可以通过this.props.xxx获取到。
'use strict';
import { createElement, Component, render, findDOMNode } from 'rax';
import { View, Text, TouchableHighlight, Modal, Button, ListView, Image, Link, Navigator, Input } from 'nuke';
import QN from 'QAP-SDK';
class ChildCom extends Component {
render() {
return (<Text>现在时刻： {this.props.date}</Text>);
}
}
class Demo extends Component {
render() {
return (
<View style={{alignItems:'center'}}>
<ChildCom date={new Date()} />;
</View>);
}
}
render(<Demo />);
父类通过把需要被调用的方法传递给子类，子类需要操作父类的时候调用此方法。
'use strict';
import { createElement, Component, render, findDOMNode, PropTypes } from 'rax';
import { View, Text, TouchableHighlight, Modal, Button, ListView, Image, Link, Navigator, Input } from 'nuke';
import QN from 'QAP-SDK';
class ChildCom extends Component {
constructor(props) {
super(props);
const {onTimeChange} = this.props;
setInterval(()=>{
//回调父类传递过来的方法
onTimeChange && onTimeChange(new Date());
}, 1000);
}
render() {
return (<Text>子类控件：${new Date()}</Text>)
}
}
//声明propTypes，方便编译或运行时做类型检查
ChildCom.propTypes = {
onTimeChange: PropTypes.func
};
class Demo extends Component {
state = {date:''};
onTimeChange = (timeNow)=>{
this.setState({date:timeNow});
}
render() {
return (
<View style={{alignItems:'center'}}>
<ChildCom onTimeChange={this.onTimeChange} />
<Text>父类控件：${this.state.date}</Text>
</View>)
}
}
render(<Demo />);
该方法能解耦组件，即使没有继承关系的类，也能随意派发事件
'use strict';
import { createElement, Component, render, findDOMNode, PropTypes } from 'rax';
import { View, Text, TouchableHighlight, Modal, Button, ListView, Image, Link, Navigator, Input } from 'nuke';
import QN from 'QAP-SDK';
class ChildCom extends Component {
constructor(props) {
super(props);
setInterval(()=>{
QN.emit('event_time', {date: new Date()});
}, 1000);
}
render() {
return (<Text>子类控件：{new Date()}</Text>)
}
}
//声明propTypes，方便编译或运行时做类型检查
ChildCom.propTypes = {
onTimeChange: PropTypes.func
};
class Demo extends Component {
state={};
constructor(props) {
super(props);
QN.on('event_time', (msg) => {
if(msg && msg.date){
this.setState({date: msg.date});
}
});
}
render() {
return (
<View style={{alignItems:'center'}}>
<ChildCom onTimeChange={this.onTimeChange} />
<Text>父类控件：{this.state.date}</Text>
</View>)
}
}
render(<Demo />);