国产睡熟迷奷白丝护士系列精品,中文色字幕网站,免费h网站在线观看的,亚洲开心激情在线

      <sup id="hb9fh"></sup>
          1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

            手機站
            千鋒教育

            千鋒學習站 | 隨時隨地免費學

            千鋒教育

            掃一掃進入千鋒手機站

            領取全套視頻
            千鋒教育

            關(guān)注千鋒學習站小程序
            隨時隨地免費學習課程

            當前位置:首頁  >  技術(shù)干貨  > 在React中使文本加粗的3種簡單方法

            在React中使文本加粗的3種簡單方法

            來源:千鋒教育
            發(fā)布人:syq
            時間: 2022-09-21 15:51:59 1663746719

              要在 React 中使文本加粗,請使用 元素環(huán)繞文本,并將 的 style 屬性設置為 。span fontWeight span bold

            在React中使文本加粗

              例如:

              應用.js

            1

            0_-sgvPM_kZU8BIQCH

              我們使用內(nèi)聯(lián)樣式使文本加粗。React 元素的特性接受具有駝峰大小寫屬性的 JavaScript 對象,而不是 CSS 串形字符串。因此,設置 CSS 屬性。style fontWeightfont-weight

              如果我們不需要用條件來控制粗體,那么我們可以只用元素包裝文本。b

              應用.js

            3

              具有內(nèi)聯(lián)樣式的條件粗體文本

              有時,我們可能只想將一段文本加粗,僅當某個條件為 。以下是我們執(zhí)行此操作的方法:true

              應用.js

            4

            5

              我們使用一個名為 state 變量來存儲復選框的當前選中狀態(tài),并確定相關(guān)文本是否應為粗體。bold

              我們將事件偵聽器附加到事件,以便在選中或取消選中復選框時調(diào)用它。在此偵聽器中,我們使用該函數(shù)來更新文本的值并更改文本的粗體。onChange setBold bold

              帶自定義組件的粗體文本

              如果我們經(jīng)常需要將文本設為粗體,我們可以將邏輯抽象為可重用的自定義組件。

              應用.js

            6

              此代碼將在網(wǎng)頁上生成相同的結(jié)果。

            7

             

              無論在 和 標記中放置什么文本,都將具有粗體字體。<BoldText></BoldText>

              具有自定義組件的條件粗體文本

              若要使用自定義組件有條件地使文本加粗,我們可以創(chuàng)建一個布爾屬性,該屬性將確定組件的子文本是否應為粗體。bold

              應用.js

            8

            9

              帶類的粗體文本

              或者,我們可以通過在CSS文件中定義一個類來使 React 中的文本加粗,例如:bold App.css

              應用.css

            10

              然后,我們將導入文件并將類應用于元素,以使其中的所有文本都加粗。App.css bold span

              應用.js

            11

              這將產(chǎn)生與前兩種方法完全相同的結(jié)果:

              帶類的條件粗體文本

              下面介紹如何使用類名使文本加粗,僅當特定條件是:true

              應用.js

            13

              使用三元運算符,如果變量為 ,則將屬性設置為類。否則,我們將設置為空字符串 ()。class Namebold bold true className''

            14

              僅當選中該復選框時,文本才以粗體顯示

              提示: 您可以使用 NPM 中的 clsx 實用程序從 React 中的一組條件更輕松地構(gòu)造類名,而不是三元運算符。

            tags:
            聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
            10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
            請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
            免費領取
            今日已有369人領取成功
            劉同學 138****2860 剛剛成功領取
            王同學 131****2015 剛剛成功領取
            張同學 133****4652 剛剛成功領取
            李同學 135****8607 剛剛成功領取
            楊同學 132****5667 剛剛成功領取
            岳同學 134****6652 剛剛成功領取
            梁同學 157****2950 剛剛成功領取
            劉同學 189****1015 剛剛成功領取
            張同學 155****4678 剛剛成功領取
            鄒同學 139****2907 剛剛成功領取
            董同學 138****2867 剛剛成功領取
            周同學 136****3602 剛剛成功領取
            相關(guān)推薦HOT