如何在 React 中使文本加粗
如何在 React 中使文本加粗
要在 React 中使文本变为粗体，请使用 跨度 元素，并设置 字体重量 样式属性 跨度 至 大胆的 .
要在 React 中使文本变为粗体，请使用 跨度 元素，并设置 字体重量 样式属性 跨度 至 大胆的 .
例如：
应用程序.js
导出默认函数 App() {
返回 （
<div>
编码{' '}
<span style={{ fontWeight: 'bold' }}>美丽</span>
</div>
);
}
我们使用内联样式使文本变为粗体。这 风格 React 元素的属性接受具有驼峰式属性的 JavaScript 对象，而不是 CSS kebab 大小写的字符串。所以， 字体重量 设置 字体粗细 CSS 属性。
如果我们不需要用条件来控制粗体，那么我们可以只用一个 b 元素。
应用程序.js
导出默认函数 App() {
返回 （
<div>
编码<b>之美</b>
</div>
);
}
带有内联样式的有条件的粗体文本
有时我们可能希望仅在满足特定条件时才将一段文本设为粗体 真的 .我们可以这样做：
应用程序.js
从“反应”导入 { useState }； 导出默认函数 App() {
常量 [bold, setBold] = useState(false); const handleBoldChange = (事件) => {
setBold(event.target.checked);
}; 返回 （
<div>
编码{' '}
<span
style={{ fontWeight: 粗体？ “粗体”：“正常”}}
>
美丽
</span> <br></br> <input
名称="粗体"
类型=“复选框”
值={粗体}
onChange={handleBoldChange}
></input> <label htmlFor="bold">大胆的</label>
</div>
);
}
The text is bold only if the checkbox is checked.
我们使用一个名为的状态变量 大胆的 存储复选框的当前选中状态并确定相关文本是否应为粗体。
我们将一个事件监听器附加到 改变 事件，因此在选中或取消选中复选框时调用它。在这个监听器中，我们使用 设置粗体 更新值的函数 大胆的 并更改文本的粗体。
带有自定义组件的粗体文本
如果我们经常需要将文本加粗，我们可以将逻辑抽象为可重用的自定义组件。
应用程序.js
功能BoldText（{孩子}）{
返回 （
<span style={{ fontWeight: 'bold' }}>{孩子们}</span>
);
} 导出默认函数 App() {
返回 （
<div>
编码<BoldText>美丽</BoldText>
</div>
);
}
此代码将在网页上产生相同的结果。
无论文本放在 <BoldText> 和 </BoldText> 标签将有一个粗体字。
带有自定义组件的有条件的粗体文本
要使用自定义组件有条件地使文本变为粗体，我们可以创建一个布尔值 大胆的 该属性将确定组件的子文本是否应为粗体。
应用程序.js
从“反应”导入 { useState }； 函数粗体文本（{孩子，粗体}）{
返回 （
<span style={{ fontWeight: bold ? 'bold' : 'normal' }}>
{孩子们}
</span>
);
} 导出默认函数 App() {
常量 [bold, setBold] = useState(false); const handleBoldChange = (事件) => {
setBold(event.target.checked);
}; 返回 （
<div>
编码<BoldText bold={bold}>美丽</BoldText> <br></br> <input
名称="粗体"
类型=“复选框”
值={粗体}
onChange={handleBoldChange}
></input> <label htmlFor="bold">大胆的</label>
</div>
);
}
The text is bold only if the checkbox is checked.
带有类的粗体文本
或者，我们可以通过定义一个 大胆的 CSS 文件中的类，例如， 应用程序.css ：
应用程序.css
。大胆的 {
字体粗细：粗体；
}
然后我们将导入 应用程序.css 文件并应用 大胆的 上课 跨度 元素使其中的所有文本变为粗体。
应用程序.js
导入'./App.css'； 导出默认函数 App() {
返回 （
<div>
编码<span className="bold">之美</span>
</div>
);
}
这将产生与前两种方法完全相同的结果：
带有类的有条件的粗体文本
以下是我们如何使用类名使文本变为粗体，仅当特定条件为 真的 ：
应用程序.js
从“反应”导入 { useState }；
导入'./App.css'； 导出默认函数 App() {
常量 [bold, setBold] = useState(false); const handleBoldChange = (事件) => {
setBold(event.target.checked);
}; 返回 （
<div>
编码{' '}
<span className={bold ? 'bold' : ''}>美丽</span> <br></br> <input
名称="粗体"
类型=“复选框”
值={粗体}
onChange={handleBoldChange}
></input>
<label htmlFor="bold">大胆的</label>
</div>
);
}
使用三元运算符，我们设置 班级名称 财产给 大胆的 类如果 大胆的 变量是 真的 .否则，我们设置 班级名称 到一个空字符串 ( '' ）。
The text is bold only if the checkbox is checked.
小费： 代替三元运算符，您可以使用 clsx 来自 NPM 的实用程序，可以更轻松地从 React 中的一组条件构造类名。
最初发表于 编码beautydev.com
JavaScript 所做的每一件疯狂的事
关于 JavaScript 的细微警告和鲜为人知的部分的迷人指南。
注册 并立即获得免费副本。
更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .对增长黑客感兴趣？查看 ** 电路** .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
