react-components-manager
v1.0.10-alpha.4
Published
manage react components server render
Downloads
23
Maintainers
Readme
manage react components
react render your page by data
In order to write once, render any pages by data.
TODO
import dependencies
import React from "react";
import { render } from "react-dom";
import App from "react-components-manager";
import your components
// components
import Help from "../components/Help";
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
render(
<App
initData={ initData }
componentsList={ componentsList }
id={ "ctyloading" }
/>,
document.querySelector('#page')
)
components
import React, { Component, PropTypes } from "react";
class Help extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
this.props.update(this.props.id, (componentName, state) => {
console.info(componentName, state)
return state;
})
}
render() {
// data为传入的数据,initData中所对应组件的数据
// className id 为 App 自动生成,必须放入最外层div
let { collection, className, id } = this.props;
let data = collection.data;
return (
<h1 className={ className } id={ id } onClick={ this.onClick }>{ data.msg }</h1>
)
}
}
module.exports = Help;
this.props
let { id, collection, className, update, updateGlobal } = this.props;
// id 组件唯一标识
// data initData中所对应组件的数据
// className sdk生成的className
// update 手动更新state的接口
this.props.update
params:
- id 组件的唯一标识
- callback 回调函数
- id 组件的唯一标识
- state 应用的state
this.props.update(this.props.id, (id, state) => {
return state; // 修改后必须返回
})
this.props.updateGlobal
params:
- callback 回调函数
- id 组件的唯一标识
- state 应用的state
this.props.updateGlobal((id, state) => {
return state; // 修改后必须返回
})