React之繫結屬性
阿新 • • 發佈:2020-08-01
import React from 'react'; import '../assets/css/index.css'; /* react繫結屬性注意: class要換成className for要換成 htmlFor style: <div style={{"color":'red'}}>我是一個紅的的 div 行內樣式</div> 其他的屬性和以前寫法是一樣的 */ class Home extends React.Component{ // 子類必須在constructor方法中呼叫super方法,否則新建例項時會報錯。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其進行加工。如果不呼叫super方法,子類就得不到this物件constructor(props){ super(props); //固定寫法 this.state={ msg:'我是一個home元件', title:'我是一個title', color:'red', style:{ color:'red', fontSize:'40px' } } } render(){ return( <div> <h2>{this.state.msg}</h2> <div title="1111">我是一個div</div> <br /> <div title={this.state.title}>我是一個div</div> <br /> <div id="box" className='red'>我是一個紅的的div---id</div> <br /> <div className={this.state.color}>我是一個紅的的div 1111</div> <br /> <label htmlFor="name">姓名</label> <input id="name" /> <br /> <br /> <div style={{"color":'red'}}>我是一個紅的的 div 行內樣式</div> <br /> <br /> <div style={this.state.style}>我是一個紅的的 div 行內樣式</div> </div> ) } } export default Home;