React（3） --react綁定屬性

react綁定屬性

/*
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> //全部的模板要被一個根節點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;