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>
    	);
    }
    

  • 相关阅读:
    uoj#207 共价大爷游长沙
    bzoj4006 [JLOI2015]管道连接
    bzoj2595 [Wc2008]游览计划
    uoj#300.【CTSC2017】吉夫特
    bzoj2565 最长双回文串
    bzoj2342 [Shoi2011]双倍回文
    bzoj3676 [Apio2014]回文串
    [转载]物理大神的八卦完整版——大爱物理
    低层次数论书籍大杂烩
    控制论课题
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12829985.html
Copyright © 2011-2022 走看看