react篇章-React Props
阿新 • • 發佈：2019-03-02
ons scrip uno cnblogs reac style pro 思考 blog
state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什麽有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。
demo1
<!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> <div id = "helloReactZzw"></div> <script type="text/babel"> function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } class HelloMessageZzw extends React.Component { render() { return ( <h1>Hello, {this.props.myname}</h1> ); } } const element= <HelloMessage name="Runoob"/>; const elementZzw = <HelloMessageZzw myname = "zzwLearningReact"/>; //const elementZzw1 = <HelloMessageZzw myname = "zzwLearningReact"/> + <HelloMessage name="Runoob"/>; //留一下一個問題下次思考 ReactDOM.render( elementZzw, document.getElementById(‘example‘) ); </script> </body> </html>
demo2
<!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> <div id = "helloZzw"/> <script type="text/babel"> class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.myname}</h1> ); } } HelloMessage.defaultProps = { name: ‘Runoob‘, myname:‘zzw‘, }; const element = <HelloMessage/>; ReactDOM.render( element, document.getElementById(‘helloZzw‘) ); </script> </body> </html>
demo3
<!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"> class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鳥教程", site: "http://www.runoob.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Zzw extends React.Component {//react聲明組件時，第一個字母必須大寫 constructor() { super(); this.state = { name: "我的博客", site: "https://www.cnblogs.com/zzzzw" } } render() { return ( <div> <Zzw1 name={this.state.name} /> <Zzw2 site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } class Zzw1 extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Zzw2 extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } ReactDOM.render( <Zzw />, document.getElementById(‘example‘) ); </script> </body> </html>
react篇章-React Props