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

　　例如：

　　應用.js

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

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

　　應用.js

　　具有內聯樣式的條件粗體文本

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

　　應用.js

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

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

　　帶自定義組件的粗體文本

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

　　應用.js

　　此代碼將在網頁上生成相同的結果。

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

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

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

　　應用.js

　　帶類的粗體文本

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

　　應用.css

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

　　應用.js

　　這將產生與前兩種方法完全相同的結果：

　　帶類的條件粗體文本

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

　　應用.js

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

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

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