React組件
阿新 • • 發佈:2018-08-07
eric ack 字母 react color com app 頭部 hello
一、函數式組件
①無狀態的函數式組件
<div id="app"></div> <script src="node_modules/@babel/standalone/babel.js"></script> <script src="node_modules/react/umd/react.development.js"></script> <script src="node_modules/react-dom/umd/react-dom.development.js"></script> <script type="text/babel"> //組件的名字首字母大寫 // 這種函數式組件也是無狀態的 function AppHeader() { return ( <div className="header"> <h2>頭部部分</h2> </div> ) } function AppContent() {return ( <div className="content"> <h3>中間內容部分</h3> </div> ) } function AppFooter() { return ( <div className="footer"> <h2>尾部部分</h2> </div> ) } const element = ( <div> <AppHeader /> <AppContent /> <AppFooter /> </div> ) ReactDOM.render(element,document.getElementById(‘app‘))
②有參數的函數式組件
<div id="app"></div> <script src="node_modules/@babel/standalone/babel.js"></script> <script src="node_modules/react/umd/react.development.js"></script> <script src="node_modules/react-dom/umd/react-dom.development.js"></script> <script type="text/babel"> //組件的名字首字母大寫 // 這種函數式組件也是無狀態的 function Welcome(props) { return <h2>hello {props.name}</h2> } const element = ( <div> <Welcome name=‘eric‘ /> <Welcome name=‘jack‘ /> <Welcome name=‘lisa‘ /> </div> ) ReactDOM.render(element,document.getElementById(‘app‘)) </script>
③
二、
React組件