一个标准的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 />);
本文描述的例子只是让开发者快速入门,后续章节将会描述如何编写受控组件
和非受控组件
。