manage react components
react render your page by data
In order to write once, render any pages by data.
TODO
import dependencies
;; ;
import your components
// components;
setup initData and componentsList
let initData = collections: // the type is component`s name type: 'help' // the id is unique id: '0' // the text is this component`s data data: msg: 'welcome to ctyloading`s website' type: 'help' id: '1' data: msg: '老子是你大哥!' type: 'help' id: '2' data: msg: '小的知错了!' structure: /** * root is page`s structure * render in turn */ root: 'help_0' 'help_1' 'help_2' ; let componentsList = help: Help
render
components
; { superprops; thisonClick = thisonClick; } { thisprops } { // data为传入的数据,initData中所对应组件的数据 // className id 为 App 自动生成,必须放入最外层div let collection className id = thisprops; let data = collectiondata; return <h1 className= className id= id onClick= thisonClick > datamsg </h1> } moduleexports = Help;
this.props
let id collection className update updateGlobal = thisprops;// id 组件唯一标识// data initData中所对应组件的数据// className sdk生成的className// update 手动更新state的接口
this.props.update
params:
- id 组件的唯一标识
- callback 回调函数
- id 组件的唯一标识
- state 应用的state
thisprops
this.props.updateGlobal
params:
- callback 回调函数
- id 组件的唯一标识
- state 应用的state
thisprops