复合组件也被称为组合组件,创建多个组件合成一个组件
定义一个组件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>