react.js的組件化

react.js只是一個庫,并不是一個框架,只提供UI層面的解決方案,一個完整的react項目需要結合其他庫完成,例如Redux,React-router等.
在react.js中一切都是組件,在編寫react.js組件的時候,一般需要繼承react.js的Component,該方法按照我的理解是創(chuàng)建有個基于此的類,然后一定要有一個render方法必須返回一個JSX元素,
eg:

class TestComponent extends Component{
      render(){
            return(
                  <div>
                        <div>one</div>
                        <div>one</div>
                  </div>
        )
    }
}

前面已標注一個,返回多個的話會報錯,所以如果寫多個標簽的話,最外層用一個標簽包裹起來.
上面的例子中可以看到其中有JavaScript也有html代碼,這種形式就是JSX格式,如果不懂這種格式化,建議自己慢慢理解,自己去查資料領悟這種JavaScript里包含HTML的形式.
不過簡單來說就是在JSX文件中,在瀏覽器解析時遇到{}會解析成JavaScript,遇見<>會解析成HTML,所以這種形式十分靈活.
在這種形式里寫HTML有兩點需要注意的地方:

1.不能使用class給元素添加類名,因為class是JavaScript的關鍵字(構造類),所以添加類名時要是用className
2.for屬性也是不能再HTML里寫的,比如<label for='one'>one</label>,因為for也是JavaScript的關鍵字,所以在JSX中用htmlFor代替

一個完整的組件還包含其他東西,這一章就這樣了

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容