一个标准的ES6 语法的组件
- 每个组件都有一个 render 方法,用来接收数据然后返回要显示在页面上的内容。
如果你的项目中需要对常用业务组件进行封装,可以参考如下建议demo
AwesomeProject/src/components/easy-button.jsx'use strict';
import {createElement, Component, render, findDOMNode} from 'rax';
import {View, Text, TouchableHighlight, Modal, Button, ScrollView} from 'nuke';
class EasyButton extends Component {
pressHandler = (e)=>{
Modal.toast('hello weex')
}
render() {
const {style,onPress,children} = this.props;
return(
<TouchableHighlight onPress={this.pressHandler} style={style}>
<Text>{children}</Text>
</TouchableHighlight>);
}
}
export default EasyButton;
使用:
'use strict';
import {createElement, Component, render, findDOMNode} from 'rax';
import {View, Text, TouchableHighlight, Modal, Button, ScrollView} from 'nuke';
import EasyButton from './components/easy-button.jsx';
class Demo extends Component{
render(){
return <View><EasyButton children='我是按钮'></EasyButton></View>
}
}
render(<Demo />);
本文描述的例子只是让开发者快速入门,后续章节将会描述如何编写受控组件和非受控组件。