分享一个mui与react结合的demo

最新推荐文章于 2024-04-03 09:39:36 发布

I-T枭

最新推荐文章于 2024-04-03 09:39:36 发布

阅读量2k

点赞数

分类专栏： React MUI

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/82346240

版权

React 同时被 2 个专栏收录

74 篇文章 1 订阅

订阅专栏

MUI

7 篇文章 0 订阅

订阅专栏

源码：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>
    <div id="app"></div>
    <script src="bower_components/zepto/zepto.min.js"></script>
    <script src="bower_components/react/react.min.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
    <script src="js/react/react_components.js "type="text/jsx"></script>
    <script src="js/react/index.js" type="text/jsx"></script>
</body>
</html>

react_components.js

var Header = React.createClass({
    render: function(){
        return (
            <header className="mui-bar mui-bar-nav">
                <h1 className="mui-title">{this.props.title}</h1>
            </header>
        )
    }
});

index.js

var Topic = React.createClass({
    render: function(){
        return (
            <li className="mui-table-view-cell">
                <a className="mui-navigate-right">
                    {this.props.title}
                </a>
            </li>
        )
    }
})

var TopicList = React.createClass({
    getInitialState: function() {
        return {
            topics: []
        }
    },
    render:function(){
        var topics = this.props.topics;
        var topic = topics.map(function(t){
            return <Topic title={t.title} />
        });
        return (
            <ul className="mui-table-view mui-table-view-chevron margin-top-44">
                {topic}
            </ul>
        )
    }
})

var App = React.createClass({
    getInitialState: function() {
        return {
            title: '首页',
            topics: []
        }
    },
    componentDidMount: function() {
            $.get('http://jfbbs.tomoya.cn/api/index', function(result){
                this.setState({
                    topics: result.detail.list
                })
            }.bind(this));
    },
    render:function(){
        return (
            <div>
                <Header title={this.state.title}/>
                <TopicList topics={this.state.topics}/>
            </div>
        )
    }
});

React.render(
    <App/>,
    document.getElementById("app")
)

I-T枭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享一个mui与react结合的demo

源码：index.html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-
复制链接

扫一扫