最近在寫一個android的學習類應用，其中一個就是涉及知識體系，想了一下，決定還是混合webview來寫，方便修復資料的錯誤與更新資料。

由於知識體系，基本就是章節標題，章節條目，涉及重點的顏色突出。

匯入資料就直接用寫好的元件就好了。

這裡用的是react。

比如這個：章節是：資訊化管理，小結是：企業資訊化的發展

下面是元件程式碼：Ui使用是bootstrap3框架

//列表卡片
var ul_card = React.createClass({
	displayName: "ul_card",
	propTypes: {
		ul_type: React.PropTypes.string,
		ul_head: React.PropTypes.string,
		ul_li_items: React.PropTypes.arrayOf(React.PropTypes.String)
	},
	getInitialState: function getInitialState() {
		return {
			ul_head: this.props.ul_head,//接收章節名
			ul_type: this.props.ul_type,//接收章節型別，紅色重要，綠色等
			ul_li_items: this.props.ul_li_items//接收小結，陣列
		};
	},
	render: function() {
		return React.createElement(
			"div", {
				className: "container"
			},
			React.createElement(
				"div", {
					className: this.props.ul_type
				},
				React.createElement(
					"small",
					null,
					this.props.ul_head
				)
			),
			React.createElement(
				"ul", {
					className: "list-group"
				},//迴圈渲染小結
				this.props.ul_li_items.map(function(row, rowid) {
					return React.createElement(
						"li", {
							className: "list-group-item",
							key: rowid
						},
						row
					);
				})
			)
		);
	}
});
 

渲染程式碼：

在需要的html頁面引入js（如果是JSX需要轉換一下，es6也需要換一下，這裡直接browser.js處理了，很慢。。）

<div id="il_card"></div>
//渲染js
ReactDOM.render(
		React.createElement(ul_card,{
		ul_head:"4.3資訊化管理",
		ul_type:"sl_green",
		ul_li_items:[
			"企業資訊化管理的發展"
		]
	}),document.getElementById('ul_card')
	);

這樣就好啦。這只是一個條例，很多的時候們就可以方便使用了。

下面是多個條例。

還有一個就是尾部，會有一個結束提示，比如，章節結束，每個頁面都會有，直接用小元件。

雖然這個很簡單，但是如果網站尾部都這樣使用，就很大的簡化的步驟。

程式碼：

//渲染程式碼
ReactDOM.render(
		React.createElement(over_tips,{tips:"本章節結束"}),document.getElementById("over_tips")
		);
//元件程式碼：
//結束提示元件
var over_tips = React.createClass({
	displayName: "over_tips",

	propTypes: {
		tips: React.PropTypes.string//接收引數
	},
	getInitialState: function getInitialState() {
		return {
			tips: this.props.tips
		};
	},
	render: function() {
		return React.createElement(
			"div", {
				className: "container"
			},
			React.createElement(
				"button", {
					className: "btn btn-success col-xs-12"
				},
				this.props.tips
			)
		);
	}
});
 

這是一個案例大題：

同樣的程式碼：

//案例元件
var eg = React.createClass({
	displayName: "eg",
	propTypes: {
		eg_title: React.PropTypes.string,
		eg_content: React.PropTypes.string,
		eg_how: React.PropTypes.arrayOf(React.PropTypes.string)
	},
	getInitialState: function getInitialState() {
		return {
			eg_title: this.props.eg_title,
			eg_content: this.props.eg_content,
			eg_how: this.props.eg_how
		};
	},
	render: function() {
		return React.createElement(
			"div", {
				className: "container-fluid"
			},
			React.createElement(
				"div", {
					className: "eg_head panel"
				},
				React.createElement(
					"div", {
						className: "panel-heading"
					},
					React.createElement(
						"h4", null, this.props.eg_title)),
				React.createElement(
					"div", {

						className: "panel-body"
					},
					React.createElement(
						"div", {
							className: "eg_content"
						}, this.props.eg_content),
					React.createElement(
						"ul", {
							className: "list-group"
						},
						this.props.eg_how.map(function(row, rowid) {
							return React.createElement(
								"li", {
									className: "list-group-item green",
									key: rowid
								},
								row)
						})
					)
				)
			),

		)
	}

});

下面是答案：

為什麼分開寫呢，因為，答案太細了。。。還有就是不太熟悉react

檢視解析，直接用react的onclick就好了。程式碼就不放了，基本一致，主要就是設計好分層的條例。就顯得好看多了、

最後，別直接用browser轉換，慢、有時候巨慢。還報錯。