繫結屬性
阿新 • • 發佈:2021-08-10
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<scriptsrc="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <scriptsrc="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <scriptsrc="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head> <body> <divid="app"></div> <scripttype="text/babel"> //封裝App元件 classAppextendsReact.Component{ constructor(){ super(); this.state={ title:'標題', //imagUrl:'https://himg.bdimg.com/sys/portrait/item/wise.1.7410f781.uIX3cBSrpKoNZuTngAm-Sg.jpg?time=8674' imagUrl:"", active:true } }
render(){ const{title,imagUrl,active}=this.state; return( <div> <h2title={title}>我是標題</h2> <imgsrc={imagUrl}alt=""/> <divclassName="boxtitle">我是div元素</div> <divclassName={"boxtitle"+(active?'active':'')}>我也是div元素</div> <divstyle={{color:"red",fontSize:50}}>我是div元素,繫結style樣式</div> </div> ) } } ReactDOM.render(<App/>,document.getElementById('app')); </script> </body> </html> 我是Eric,手機號是13522679763
<scriptsrc="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <scriptsrc="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <scriptsrc="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head> <body> <divid="app"></div> <scripttype="text/babel"> //封裝App元件 classAppextendsReact.Component{ constructor(){ super(); this.state={ title:'標題', //imagUrl:'https://himg.bdimg.com/sys/portrait/item/wise.1.7410f781.uIX3cBSrpKoNZuTngAm-Sg.jpg?time=8674' imagUrl:"", active:true } }
render(){ const{title,imagUrl,active}=this.state; return( <div> <h2title={title}>我是標題</h2> <imgsrc={imagUrl}alt=""/> <divclassName="boxtitle">我是div元素</div> <divclassName={"boxtitle"+(active?'active':'')}>我也是div元素</div> <divstyle={{color:"red",fontSize:50}}>我是div元素,繫結style樣式</div> </div> ) } } ReactDOM.render(<App/>,document.getElementById('app')); </script> </body> </html> 我是Eric,手機號是13522679763