欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

  • <tt id="tmxcr"></tt>
    <samp id="tmxcr"><b id="tmxcr"><small id="tmxcr"></small></b></samp>
      1. <code id="tmxcr"><wbr id="tmxcr"></wbr></code>
        1. React css-in-js基礎(chǔ)介紹與應(yīng)用

           更新時間:2022年09月28日 16:24:55   作者:月光曬了很涼快  
          隨著React、Vue等支持組件化的MVVM前端框架越來越流行,在js中直接編寫css的技術(shù)方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢,下面帶你了解它

          1. 介紹

          CSS-in-JS 是一種技術(shù),而不是一個具體的庫實現(xiàn)。簡單來說 CSS-in-JS 就是將應(yīng)用的CSS樣式寫在 JavaScript 文件里面,而不是獨立為一些 css,scss 或 less 之類的文件,這樣你就可以在 CSS 中使用一些屬于JS的諸如模塊聲明,變量定義,函數(shù)調(diào)用和條件判斷等語言特性來提供靈活的可擴(kuò)展的樣式定義。CSS-in-JS 在 React 社區(qū)的熱度是最高的,這是因為 React 本身不會管用戶怎么去為組件定義樣式的問題,而 Vue 有屬于框架自己的一套定義樣式的方案。

          styled-components 應(yīng)該是 CSS-in-JS 最熱門的一個庫,通過 styled-components,你可以使用 ES6 的標(biāo)簽?zāi)0遄址Z法,為需要 styled 的 Component 定義一系列 CSS 屬性,當(dāng)該組件的 JS 代碼被解析執(zhí)行的時候,styled-components 會動態(tài)生成一個 CSS 選擇器,并把對應(yīng)的 CSS 樣式通過 style 標(biāo)簽的形式插入到 head 標(biāo)簽里面。動態(tài)生成的 CSS 選擇器會有一小段哈希值來保證全局唯一性來避免樣式發(fā)生沖突。

          在react項目中,可以讓樣式命名不沖突的方案

          • 定義樣式名稱時,就讓它唯一
          • 使用內(nèi)置的cssModule
          • css-in-js 把css當(dāng)作js來使用

          2. 使用

          首先需要安裝相關(guān)包:

          yarn add styled-components

          使用:

          App.jsx:

          import React, { Component } from 'react'
          import Child from './components/Child-07-樣式'
          class App extends Component {
            render() {
              return (
                <div>
                  <Child />
                </div>
              )
            }
          }
          export default App
          

          Child.jsx:

          import React, { Component } from 'react'
          // 導(dǎo)入樣式組件
          import { ChildContainer, TitleContainer, SubTitleContainer, ContentContainer } from './style'
          class Child extends Component {
            render() {
              return (
                <ChildContainer>
                  {/* <TitleContainer>我是一個child組件</TitleContainer> */}
                  {/* 嵌套使用 */}
                  <div className="title">我是一個child組件</div>
                  <SubTitleContainer>我是一個副標(biāo)題</SubTitleContainer>
                  <hr />
                  {/* 屬性傳遞 */}
                  <ContentContainer color='#00f' size="20">
                    我是內(nèi)容
                  </ContentContainer>
                </ChildContainer>
              )
            }
          }
          export default Child
          

          style.js:

          // 使用css-in-js技術(shù)方案完成 react項目中的樣式編寫
          // styled-components把樣式當(dāng)作組件來定義和使用,樣式就是組件,組件就是樣式
          import styled from 'styled-components'
          // 語法
          // export const ChildContainer = styled.html標(biāo)簽名`樣式`
          export const ChildContainer = styled.div`
            /* 在此字符串模板中,寫css就可以了 */
            font-size: 30px;
            color:#f0f;
            /* 嵌套定義 */
            .title{
              font-size:18px;
            }
          `
          export const TitleContainer = styled.div`
            color:red;
            font-size:18px;
          `
          // 樣式繼承
          export const SubTitleContainer = styled(TitleContainer)`
            font-size:14px;
          `
          // 在樣式中獲取樣式組件中的屬性信息
          export const ContentContainer = styled.div`
            color:${props => props.color || '#888'};
            font-size: ${props => props.size || 12}px;
          `

          到此這篇關(guān)于React css-in-js基礎(chǔ)介紹與應(yīng)用的文章就介紹到這了,更多相關(guān)React css-in-js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

          相關(guān)文章

          • 通過React-Native實現(xiàn)自定義橫向滑動進(jìn)度條的 ScrollView組件

            通過React-Native實現(xiàn)自定義橫向滑動進(jìn)度條的 ScrollView組件

            開發(fā)一個首頁擺放菜單入口的ScrollView可滑動組件,允許自定義橫向滑動進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序為縱向由上至下依次排列,對React Native橫向滑動進(jìn)度條相關(guān)知識感興趣的朋友一起看看吧
            2024-02-02
          • redux工作原理講解及使用方法

            redux工作原理講解及使用方法

            這篇文章主要介紹了redux工作原理講解及使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
            2021-11-11
          • React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解

            React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解

            這篇文章主要為大家介紹了React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
            2022-11-11
          • React Native 集成 ArcGIS 地圖的詳細(xì)過程

            React Native 集成 ArcGIS 地圖的詳細(xì)過程

            ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細(xì)過程,感興趣的朋友跟隨小編一起看看吧
            2024-06-06
          • react?源碼中位運算符的使用詳解

            react?源碼中位運算符的使用詳解

            這篇文章主要為大家詳細(xì)介紹了react?位運算符,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
            2022-03-03
          • 如何在React中直接使用Redux

            如何在React中直接使用Redux

            這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我們需要將之前編寫的redux代碼,融入到react當(dāng)中去,本文給大家詳細(xì)講解,需要的朋友可以參考下
            2022-11-11
          • react源碼層深入刨析babel解析jsx實現(xiàn)

            react源碼層深入刨析babel解析jsx實現(xiàn)

            同作為MVVM框架,React相比于Vue來講,上手更需要JavaScript功底深厚一些,本系列將閱讀React相關(guān)源碼,從jsx -> VDom -> RDOM等一些列的過程,將會在本系列中一一講解
            2022-10-10
          • 使用React+SpringBoot開發(fā)一個協(xié)同編輯的表格文檔實現(xiàn)步驟

            使用React+SpringBoot開發(fā)一個協(xié)同編輯的表格文檔實現(xiàn)步驟

            隨著云計算和團(tuán)隊協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡單的開發(fā)一個協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧
            2023-11-11
          • react-native DatePicker日期選擇組件的實現(xiàn)代碼

            react-native DatePicker日期選擇組件的實現(xiàn)代碼

            本篇文章主要介紹了react-native DatePicker日期選擇組件的實現(xiàn)代碼,具有一定的參考價值,有興趣的可以了解下
            2017-09-09
          • useCallback和useMemo的正確用法詳解

            useCallback和useMemo的正確用法詳解

            這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
            2023-01-01

          最新評論