zoukankan      html  css  js  c++  java
  • 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 HelloMessage(props) {
    	return <h1>Hello {props.name}!</h1>;
    }
    
    const element = <HelloMessage name="Eden"/>;
    
    ReactDOM.render(
    	element,
    	document.getElementById('example')
    );
    </script>
    
    </body>
    </html>
    

    多组件使用!

    <!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 App() {
    	return (
    	<div>
    		<Name name="百度" />
    		<Url url="http://www.baidu.com" />
    		<Nickname nickname="小度" />
    	</div>
    	);
    }
    

  • 相关阅读:
    POJ2960 S-Nim
    HDU1850 Being a Good Boy in Spring Festival
    描述性统计-1
    基础-1
    .Net程序调试
    家装设计
    ACDSee技巧
    Timeline Maker 用法小结
    Windows 7 操作系统核心文件
    艺术字的操作
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12829985.html
Copyright © 2011-2022 走看看