初识reactJS的组件化开发(一)：简单封装

最新推荐文章于 2024-05-16 06:34:14 发布

学习笔记666

最新推荐文章于 2024-05-16 06:34:14 发布

阅读量6.7k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/github_26672553/article/details/52073089

版权

HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

var navBar = React.createClass({
    render: function (){
        return <ul>{nav_li}</ul>
    }
})

createClass创建react组件对应的类，描述组件的各种行为，render函数是必须实现的，表示渲染什么内容

下面来看我们的代码，接着前面封装导航栏组件
nav.js


// 创建组件
var NavBar = React.createClass({
    liClick: function () {
        alert('组件');
    },
    render: function(){
        return <ul><li><a href="">最新电影</a></li><li><a href="" onClick={function(){alert('组件')}}>最新评论</a></li></ul>
    }
});

ReactDOM.render(
    // 使用组件
    <NavBar />,
    document.getElementById("navbar")
);

NavBar就是我们定义的组件，使用是方式是<NavBar />
这里我暂时不编译，在页面上引用nav.js

<script type="text/babel" src="src/nav.js"></script>

index.html代码：

<!DOCTYPE html>
<html>
<head>
    <title>初始</title>
    <meta charset="utf-8">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <style type="text/css">
        *{padding: 0;margin: 0}
        #navbar{position: fixed;width: 100%;height: 60px;background-color: #222;}
        #navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
        #navbar li a{color: #fff;text-decoration: none;}
    </style>
</head>
<body>
    <div id="navbar"></div>
    <div id="container"></div>
    <div id="footer"></div>

    <script type="text/babel" src="src/nav.js"></script>
</body>
</html>

预览效果：
这里写图片描述

学习笔记666

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
初识reactJS的组件化开发(一)：简单封装

var navBar = React.createClass({ render: function (){ return <ul>{nav_li}</ul> }})createClass创建react组件对应的类，描述组件的各种行为，render函数是必须实现的，表示渲染什么内容下面来看我们的代码，接着前面封装导航栏组件 nav.js// 创建组件var Na
复制链接

扫一扫