react demo5 (自定义react复合组件)

最新推荐文章于 2024-06-08 12:33:18 发布

酷jjs

最新推荐文章于 2024-06-08 12:33:18 发布

阅读量655

点赞数

分类专栏：前端笔记 react 文章标签： react

本文链接：https://blog.csdn.net/qq_32584661/article/details/71272134

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

react

19 篇文章 0 订阅

订阅专栏

React dome 5
需求：定义一个复合组件
复合组件：也称为组合组件，创建多个组件合成一个组件
注意：命名必须以大写字母开头，驼峰命名法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
</head>

<body>

<div id="container"></div>

<script type="text/babel">

   /*
    需求：定义一个复合组件
    复合组件：也称为组合组件，创建多个组件合成一个组件
    注意：命名必须以大写字母开头，驼峰命名法

    定义一个组件WebShow，功能：输出网站的名字和网址，网址是一个可以点击的链接
    分析：
        定义一个组件WebName负责输出网站名字，
        定义组件WebLink显示网站的网址，
        并且可以点击

   */

    //定义组件：webName
    var WebName = React.createClass({
        render:function () {
            return <h1>百度一下</h1>
        }
    });


   //定义组件：webLink
   var WebLink = React.createClass({
       render:function(){
           return <a href="http://www.baidu.com">http://www.baidu.com</a>
       }
   });

   //定义复合组件：webShow
   var WebShow = React.createClass({
       render:function(){
           return (
                   <div>
                       <WebName/>
                       <WebLink/>
                   </div>
           )
       }
   });

   ReactDOM.render(
           <WebShow/>,
           document.getElementById("container")
   )




</script>

</body>
</html>

酷jjs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react demo5 (自定义react复合组件)

React dome 5 需求：定义一个复合组件复合组件：也称为组合组件，创建多个组件合成一个组件注意：命名必须以大写字母开头，驼峰命名法<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react
复制链接

扫一扫