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>
    

      

  • 相关阅读:
    IIS7用进程池的PID查找占用CPU的站点
    CSS中属性的书写顺序
    int[] 和 string[] 互换
    csv 文件的读取
    扩展 DataGridView 的功能(三)
    [音乐] the dream catcher
    雷人的面试
    将MP3文件嵌入到exe中并播放
    扩展 DataGridView 的功能(二)
    扩展DataGridView 的功能(四)
  • 原文地址:https://www.cnblogs.com/zzzzw/p/10411017.html
Copyright © 2011-2022 走看看