zoukankan      html  css  js  c++  java
  • react篇章-React 组件-复合组件

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    
    <div id="example"></div>
    <script type="text/babel">
    function Name(props) {
    	return <h1>网站名称:{props.name}</h1>;
    }
    function Url(props) {
    	return <h1>网站地址:{props.url}</h1>;
    }
    function Nickname(props) {
    	return <h1>网站小名:{props.nickname}</h1>;
    }
    
    function NameBlog(props) {
    	return <h1>博客名称:{props.name}</h1>;
    }
    function UrlBlog(props) {
    	return <h2>博客地址:{props.url}</h2>;
    }
    function NicknameBlog(props) {
    	return <h3>博客小名:{props.nickname}</h3>;
    }
    function App() {
    	return (
    	<div>
    		<Name name="菜鸟教程" />
    		<Url url="http://www.runoob.com" />
    		<Nickname nickname="Runoob" />
    	</div>
    	);
    }
    function AppBlog() {
    	return (
    	<div>
    		<NameBlog name="zzzzw的博客" />
    		<UrlBlog url="https://www.cnblogs.com/zzzzw" />
    		<NicknameBlog nickname="zzzzw" />
    	</div>
    	);
    }
    
    ReactDOM.render(
    	 <AppBlog />,
    	document.getElementById('example')
    );
    </script>
    
    </body>
    </html>
    

      

  • 相关阅读:
    75. Sort Colors
    101. Symmetric Tree
    121. Best Time to Buy and Sell Stock
    136. Single Number
    104. Maximum Depth of Binary Tree
    70. Climbing Stairs
    64. Minimum Path Sum
    62. Unique Paths
    css知识点3
    css知识点2
  • 原文地址:https://www.cnblogs.com/zzzzw/p/10411017.html
Copyright © 2011-2022 走看看