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

​

​

最后，别直接用browser转换，慢、有时候巨慢。还报错。