React复合组件

最新推荐文章于 2025-03-24 08:47:57 发布

a821814989

最新推荐文章于 2025-03-24 08:47:57 发布

阅读量372

点赞数 1

分类专栏： React Native学习笔记

本文链接：https://blog.youkuaiyun.com/a821814989/article/details/53811626

版权

React Native学习笔记专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!--react.js是React的核心库-->
    <script src="./build/react.js" charset="utf-8"></script>
    <!--react-dom.js的作用是提供与DOM相关的功能-->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!--browser.min.js的作用是JSX语法转换成JavaScript语法-->
    <script src="./build/browser.min.js" charset="utf-8"></script>
  </head>
  <body>
    <!--React渲染的模板内容会插入到这个DOM节点中，也可以理解为一个容器-->
    <div id="container">

    </div>
  </body>
  <!--在React开发中，使用JSX,跟JavaScript不兼容，所以在使用JSX的地方需要设置type="text/babel"-->
  <!--babel是一个转换编译器，可以将ES6转成可以在浏览器中运行的代码-->
  <script type="text/babel">

  //在此处编写React代码


    /**
      复合组件：也被称为组合组件，创建多个组件合成一个组件
    **/
    /**
      需求：定义一个组件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.hao123.com">http://www.hao123.com</a>
      }
    });

    //WebShow
    var WebShow =React.createClass({
      render:function(){
        return (
          <div>
            <WebName />
            <WebLink />
          </div>
        );
      }
    });

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