React技巧之字符串插值
原文链接:https://bobbyhadz.com/blog/react-string-interpolation
正文从这开始~
总览
在React中,使用模板字面量进行字符串插值,比如说,<div className={
text-white ${myClass}}>
。模板字面量以反引号为界限,允许我们使用美元符号和大括号${expression}
语法来嵌入变量和表达式。
import './App.css';
export default function App() {
const myClass = 'bg-salmon';
const name = 'James Doe';
const num = 30;
return (
<div>
<div className={`text-white ${myClass}`}>Some content here</div>
<br />
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
Some content here
</div>
<h2>Hello {name}</h2>
<h2
style={{
padding: `${num + num}px`,
backgroundColor: 'lime',
}}
>
30 + 30 = {num + num}
</h2>
</div>
);
}
下面是示例中的css声明。
.bg-salmon {
background-color: salmon;
}
.text-white {
color: white;
}
模板字面量
我们可以使用模板字面量在字符串中插入变量。需要注意的是,字符串是用反引号````包裹起来的,而不是用单引号。
美元符号和大括号语法允许我们使用占位符来求值。
<div className={`text-white ${myClass}`}>Some content here</div>
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
Some content here
</div>
我们用大括号把模板字面量包裹起来,标志着一个必须被求值的表达式的开始。
开头和结尾的大括号之间的只是JavaScript代码,所以我们在模板字面量上使用的任何变量或表达式都会被求值。
当你想在JSX代码中渲染变量或表达式时,你必须将代码包裹在大括号内。
<h2>Hello {name}</h2>
JSX之外
您也可以在JSX代码之外使用模板字面量。
const num = 50;
const result = `${num + 50} percent`;
console.log(result); // ?️ 100 percent
多行字符串
默认情况下,模板字面量将这些部分连接成一个字符串。你也可以在多行字符串中使用模板字面量来插入变量。
const color1 = 'red';
const color2 = 'blue';
const poem = `roses are ${color1}
violets are ${color2}`;
console.log(poem);
// ?️ roses are red
// ?️ violets are blue
这是非常有用的,因为与连接字符串不同,我们不必在每一行都添加换行符。
调用函数
你甚至可以在模板字面量里面调用函数。
import './App.css';
export default function App() {
const subtract = (a, b) => {
return a - b;
};
const myClass = 'bg-salmon';
const num = 30;
return (
<div>
<div
style={{fontSize: `${subtract(60, 20)}px`}}
className={`padding-${subtract(100, 80)} text-white ${myClass}`}
>
Some content here
</div>
</div>
);
}
三元运算符
这里有一个示例,是在模板字面量里面使用三元运算符。
const color1 = 'blue';
const color2 = 'red';
const result = `${color1.length > color2.length ? color1 : color2}`;
console.log(result); // ?️ blue
三元运算符与if/else
语句基本类似。问号前的部分会被求值,如果它返回一个真值,运算符会返回冒号前的值,否则会返回冒号后的值。
import './App.css';
export default function App() {
return (
<div>
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
Some content here
</div>
</div>
);
}
示例中的三元运算符检查字符串hi
的length
属性是否等于2,如果等于2,则返回字符串bg-salmon
,否则返回空字符串。
逻辑运算
你也可以在模板字面量中使用逻辑或(||)运算以及逻辑与(&&)运算。
const num1 = 0;
const num2 = 100;
const result = `${num1 || num2}`;
console.log(result); // ?️ 100
如果逻辑或运算的左侧是一个真值,那么便返回该值,否则返回右侧的值。
下面是在模板字面量中使用逻辑与运算的示例。
const bool = true;
const str = 'hello';
const result = `${bool && str}`;
console.log(result); // ?️ hello
如果逻辑与运算的左侧是一个假值,那么便返回该值,否则返回右侧的值。
相关文章
- Redis数据结构存储系统:第三章:Redis在项目中如何使用?
- [TMLR | 论文简读] GemNet-OC:开发用于大型和多样化的分子模拟数据集的图神经网络
- [nature genetics | 论文简读] 用序列模型从染色体角度来预测3D基因组结构
- 利用 Kruise Rollouts 对 Kubernetes 资源实现金丝雀发布
- Kubernetes 的 CI/CD 管道概述
- ChatGPT初体验|在 ChatGPT 中运行容器或Kubernetes?
- [Briefings in Bioinformatics|论文简读]NetTDP:基于互换的真实发现比例的差异性共表达网络分析
- [IEEE Trans Med Imaging | 论文简读] Av-CasNet:OCT血管成像中的微血管全自动分割与区分
- [Information Sciences | 论文简读] DA-Net:用于多变量时间序列分类的双注意力网络
- 如何验证Kubernetes YAML Files
- 利用php脚本+redis,生成CSV测试文件,重复率为20%
- [MySQL]索引
- [MySQL]brew 安装 配置 操作 mysql(中文问题)
- [MySQl]MySQL忘记密码
- [MySQL]增加用户 授权 远程登录
- [编程题目]泥塑课
- How can I learn to program?
- 学渣的心酸(求职篇)
- 时间复杂度问题
- 测试Flask应用_学习笔记