ReactNative--复合组件

复合组件也被称为组合组件,创建多个组件合成一个组件

定义一个组件webShow。功能:输出网站的名字和网址,网址是一个可以点击的链接

分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <script src="./build/react.js" charset="utf-8"></script>
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <script src="./build/browser.min.js" charset="utf-8"></script>

    <style>
      .pStyle {
        font-size: 20px;
      }
    </style>

  </head>

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

  <script type="text/babel">

    //定义WebName组件
    var WebName = React.createClass({
      render:function(){
        return <h1>lanou</h1>;
      }
    });
    //定义WebLink组件
    var WebLink = React.createClass({
      render: function(){
        return <a href="https://www.baidu.com/">https://www.baidu.com/</a>
      }
    });
    //WebShow
    var WebShow = React.createClass({
      render:function () {
        return(
          <div>
            <WebName />
            <WebLink />
          </div>
        )
      }
    });

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

  </script>


</html>
原文地址:https://www.cnblogs.com/chebaodaren/p/6429162.html