By Ne0 — Nov 9, 2018

React实现题目的小组件

最近在写一个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就好了。代码就不放了，基本一致，主要就是设计好分层的条例。就显得好看多了、