把react组件封装成JS对象

#1

aotoo

aotoo是一个react的封装库,将react组件js实例化,通过实例的api方法,可以灵活的修改react组件的状态

GITHUB源码

INSTALL

yarn add @aotoo/aotoo
#
npm install @aotoo/aotoo

USAGE 1

将原生React组件封装成JS对象

import createComponent from '@aotoo/aotoo'

class Test extends React.Component {
  render(){
    return (
      <div className='container' onClick={this.env.onTest}>
        {this.state.title}
      </div>
    )
  }
}

const testInstance = createComponent(Test, {
  data: {
    title: 'some text'
  },
  onTest(e){
    console.log('do something')
  }
})

function Container(props){
  setTimeout(()=>{
    testInstance.setData({
      title: 'change state.title'
    })
  }, 3000)

  return (
    <testInstance.UI />
  )
}

ReactDOM.render(<Container />, document.getElementById('root'))

USAGE 2

使用配置数据生成实例

import createComponent from '@aotoo/aotoo'

const test = createComponent(
  {
    data: {
      title: 'some text',
      onClick: 'onTest?user=jack'
    },
    onTest(e, param, inst){
      console.log(param) // {user: jack}
      inst.setData({
        title: 'change state.title'
      })
    },
    changeTitle() {
      this.setData({
        title: 'change title again'
      })
    }
  },

  // template
  function(state, props){
    return (
      <div onClick={state.onClick}>{state.title}</div>
    )
  }
)

setTimeout(() => {
  test.changeTitle()
}, 3000);

ReactDOM.render(<test.UI />, document.getElementById('root'))

通用属性

属性 类型 说明
$$id String 类似于$(’#id’)的id
created Function 生命周期,同小程序组件
attached Function 生命周期,同小程序组件
ready Function 生命周期,同小程序组件
didUpdate Function 每次更新后触发

通用API

方法 类型 说明
parent § 查找父级
getData () 获取元素数据
show () 显示该组件
hide () 隐藏该组件
destory () 销毁该组件
render § 渲染组件,与直接写jsx一致
attr (p1, p2) 设置/获取data-*属性

item

引入@aotoo/aotoo后,会生成全局变量ui_item和全局方法组件UI_item, item组件将会生成一个div的html结构

配置生成组件ui_item

import '@aotoo/aotoo'

const itemConfig = {
  title: '标题',
  onClick: 'changeTitle?title=新的标题',
  changeTitle(e, param, inst){
    inst.update({
	  title: param.title
	})
  }
}

const item = ui_item(itemConfig)

ReactDOM.render(<item.UI />, document.getElementById('root'))

使用React方法组件UI_item

import '@aotoo/aotoo'

function changeTitle(e){
  this.update({
    title: '新的标题'
  })
}

const JSX = <UI_item title='标题' onClick={changeTitle}/>

item属性

属性 类型 说明
$$id String 类似于$(’#id’)的id
title String/Object/Array item结构
img String/Object/Array item结构
attr Object data-*属性
body Array item结构,子集均为item
footer Array item结构
dot Array item结构
itemClass String 自定义样式
itemStyle String 自定义样式
methods Object 自定义方法
onXXXX String/Function all events
created Function 生命周期,同小程序组件
attached Function 生命周期,同小程序组件
ready Function 生命周期,同小程序组件

item API 方法

方法 参数 说明
reset § 恢复初始数据
update (p, callback) 更新数据
setData (p, callback) 与update相同
attr (p1, p2) 设置/获取data-*属性
addClass (p, callback) 新增样式类
removeClass (p, callback) 移除样式类名
hasClass § 检测样式类名
css § 自定义样式
toggleClass (p, callback) 切换样式类名
siblings § 查找兄弟元素
parent § 查找父级
getData () 获取元素数据
show () 显示该组件
hide () 隐藏该组件
destory () 销毁该组件
render § 渲染组件,与直接写jsx一致

list

引入@aotoo/aotoo后,会生成全局变量ui_list和全局方法组件UI_list, list组件将会生成一组div的html结构(基于item组件)

配置生成组件ui_list

const listConfig = {
  data: [
    {title: 'JACK', onClick: 'onItemClick?user=jack'},
    {title: 'ROSE', onClick: 'onItemClick?user=rose'}
  ],
  listClass: 'list-class',
  onItemClick(e, param, inst){
    if (param.user === 'jack') {
      this.update({
        'data[0].title': 'JACK LOVE ROSE'
      })
    }
  }
}

const list = ui_list(listConfig)  

ReactDOM.render(<list.UI />, document.getElementById('root'))
  

使用React方法组件UI_list

import {$$} '@aotoo/aotoo'

function itemClick(e, param, inst){
  if (param.user === 'jack') {
    this.update({
      'data[0].title': 'JAKE LOVE ROSE'
    })
  }
}

const listData = [
  {title: 'JACK', onClick: 'onItemClick?user=jack'},
  {title: 'ROSE'}
]

const JSX = <UI_list 
  $$id='mylist' 
  data={listData} 
  onItemClick={itemClick}
/>

setTimeout(() => {
  $$('#mylist').update({
    'data[1].title': 'ROSE LOVE JACK TOO'
  })
}, 4000);

ReactDOM.render(JSX, document.getElementById('root'))

tree

tree组件是list组件的超集,通过扁平数据输出层次性的HTML结构,可支持多层次数据

const listConfig = {
  data: [
    {title: '广东省', idf: 'gd'},
    {title: '广州市', parent: 'gd', idf: 'gz'},
      {title: '天河区', parent: 'gd', parent: 'gz'},
      {title: '白云区', parent: 'gd', parent: 'gz'},
      {title: '越秀区', parent: 'gd', parent: 'gz'},
    {title: '深圳市', parent: 'gd'},
    {title: '东莞市', parent: 'gd'},

	{title: '湖南省', idf: 'hn'},
	{title: '长沙市', parent: 'hn'},
	{title: '衡阳市', parent: 'hn'},
  ],
  mode: 'tree'
}

const tree = ui_list(listConfig)  

ReactDOM.render(<tree.UI />, document.getElementById('root'))

空格不是必须的,为展现数据层次

list属性

属性 类型 说明
$$id String 类似于$(’#id’)的id
data Array list子集合
header JSX 列表头部
footer JSX 列表底部
listClass String 列表样式类
listStyle String 列表内联样式
itemClass String 批量设置子项样式类
itemMethod Object 批量设置子项事件方法
methods Object 设置实例方法
mode String 列表类型

list API 方法

方法 参数 说明
reset § 恢复初始数据
update (p, callback) 更新数据
setData (p, callback) 与update相同
insert (query, pay) 插入数据
append (pay) 追加数据
prepend (pay) 前置数据
remove (query) 删除数据
attr (p1, p2) 设置/获取data-*属性
addClass (p, callback) 新增样式类
removeClass (p, callback) 移除样式类名
hasClass § 检测样式类名
css § 自定义样式
toggleClass (p, callback) 切换样式类名
parent § 查找父级
getData () 获取元素数据
show () 显示该组件
hide () 隐藏该组件
destory () 销毁该组件
render § 渲染组件,与直接写jsx一致

关注我们,后续完善文档