特性（attribute）与 HTML 中元素特性类似，提供了与 QAP/Rax 元素有关的其他附加信息。所有的元素都可以拥有特性, 特性总是在 QAP/Rax 元素的起始标签中定义，并总是以键值对的形式出现，例如：name=“value”。
QAP/Rax 遵循 HTML attribute 命名规范, 所以请 不要在特性中使用驼峰风格（CamelCase） , 使用-连接符的羊肉串风格（kebab-case） 才是更好的命名方式。
所有 QAP/Rax 元素都拥有以下特性：
为元素设置唯一的id，通过函数findDOMNode很容易的获取该元素的引用。
'use strict';
import {createElement, Component, render, findDOMNode} from 'rax';
import {View, Text, TouchableHighlight, Modal} from 'nuke';
class TestComponent extends Component {
render() {
return (
<text id="hi">hi</text>
);
}
}
render(<TestComponent />);
const node = findDOMNode('hi');
Modal.alert(node);
append 特性用于控制渲染次序。它的可选值为 tree 或 node，默认为tree，不支持数据绑定。不同的值会执行不同的渲染过程：
append="tree" 是一次性渲染整个节点树，渲染更高效，但是如果页面太大容易造成较长时间的白屏。append="node" 所有节点逐个渲染，整体渲染速度略慢，但是用户体验好一些。node 和 tree 可以精细化地控制页面展示的逻辑和颗粒度，一般比较好的实践为首屏以内按 tree 解析，首屏以外按 node 解析。render() {
return (
<View>
<Text append="node">简单的文本</Text>
<Text append="tree">简单的文本</Text>
</View>)
}
为元素定义行内样式
<text style={{color:'red'}}>red color</text>
或者
'use strict';
import {createElement, Component, render, findDOMNode} from 'rax';
import {View, Text, TouchableHighlight, Modal} from 'nuke';
class TestComponent extends Component {
render() {
return (
<text style={styles.redColor}>red color</text>
);
}
}
const styles = {
redColor:{
color:'red'
}
}
render(<TestComponent />);
style属性比较容易理解，和传统的web一样，但具体的用法会有一点区别，具体请参考样式一章。
一般来说，父类更新子类元素可以通过传递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', flex:1}}>
<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 />)
Functional Components使用ref下面的例子，无法通过ref属性让Input获取焦点。
'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';
function MyFunctionalComponent() {
return (<Input ref={(com)=>this.input = com}
style={{
width: '400rem',
height: '100rem',
borderWidth: 2,
borderStyle: 'solid',
borderColor: 'black',
mairgin:20
}}/>);
}
class Demo extends Component {
onPress = () => {
Modal.alert(`this.input is undefined ? ${this.input===undefined}`);
this.input && this.input.focus();
}
render() {
return (
<View style={{alignItems:'center'}}>
<MyFunctionalComponent ref={(com)=>this.input = com}/>
<Button onPress={this.onPress}>点击输入框获取焦点</Button>
</View>);
}
}
render(<Demo />);
注意：以下情况之外请避免滥用ref属性。
1.控制空间的焦点、文字选择或者多媒体播放。
2.触发动画等相关操作
3.开发DOM节点操作的类库等