91aaa在线国内观看,亚洲AV午夜福利精品一区二区,久久偷拍人视频,久久播这里有免费视播

<strong id="fvuar"></strong>

  • <sub id="fvuar"><dl id="fvuar"><em id="fvuar"></em></dl></sub>

    1. 千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

      手機站
      千鋒教育

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

      千鋒教育

      掃一掃進入千鋒手機站

      領取全套視頻
      千鋒教育

      關注千鋒學習站小程序
      隨時隨地免費學習課程

      當前位置:首頁  >  技術干貨  > 在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

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

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

        應用.js

      3

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

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

        應用.js

      4

      5

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

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

        帶自定義組件的粗體文本

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

        應用.js

      6

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

      7

       

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

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

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

        應用.js

      8

      9

        帶類的粗體文本

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

        應用.css

      10

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

        應用.js

      11

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

        帶類的條件粗體文本

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

        應用.js

      13

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

      14

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

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

      tags:
      聲明:本站稿件版權均屬千鋒教育所有,未經(jīng)許可不得擅自轉載。
      10年以上業(yè)內強師集結,手把手帶你蛻變精英
      請您保持通訊暢通,專屬學習老師24小時內將與您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 剛剛成功領取
      相關推薦HOT